asked on

Jquery Delay

Hi Experts,

I have this script:
$("#top-bar .image-link").mouseover(
function () {
$('#sub-menu-container').stop().animate({
top: '50'}, 500,function() {});
});

But i'd like to wait to someone has hovered for 2 seconds before it triggers the effect...

Any ideas?

Many Thanks

StingRaY

Try this:

var timer = 0;
$("#top-bar .image-link").hover(function(){
    timer = setTimeout("animate_me()", 2000); // start timer when mouse is moved in
}, function() {
    clearTimeout(timer); // stop it if mouse is moved out
});
function animate_me() {
    $('#sub-menu-container').stop().animate({
      top: '50'}, 500,function() {}); 
  });
}

Open in new window

maccaj51

ASKER

Thanks Sting Ray but That seems to have come up with an error?

StingRaY

Sorry. Try this:

var timer = 0;
$("#top-bar .image-link").hover(function(){
    timer = setTimeout("animate_me()", 2000); // start timer when mouse is moved in
}, function() {
    clearTimeout(timer); // stop it if mouse is moved out
});
function animate_me() {
    $('#sub-menu-container').stop().animate({
      top: '50'}, 500,function() {}); 
}

Open in new window

maccaj51

ASKER

Hi Stingray...
Still doesnt seem to be working? The code no longer has an error but it doesnt complete the function the old code did, regardless of how long i hover

ASKER CERTIFIED SOLUTION

StingRaY

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

maccaj51

ASKER

Its still no working im afraid sting ray!

StingRaY

Check this out:

http://jsfiddle.net/kZeb3/

It is working.

maccaj51