Search code examples
javascriptjqueryanimationdelay

jQuery delay doesn't work as expected

I have the following jQuery code

$("#dropdown").hover(function() { 
        $(this).stop(true,true).fadeTo('fast',1);
        $("#options").stop(true,true).slideDown();
    }, function() { 
        $(this).delay(1000).stop(true,true).fadeTo('fast',0.1);
        $("#options").delay(1000).stop(true,true).slideUp();
    }
);

What I expect to happen is when the mouse leaves #dropdown it will wait 1 second before continuing. This is not happening.

What I am trying to achieve, in case there is a better way, is to leave the drop down menu visible for a second or two after moving your mouse and I would also like to prevent the events from happening again to prevent artifacts and "funnies" if you were to move the mouse over and out from the div very quickly

Solution

  • The problem is .stop(). If you take that out it works:

    http://jsfiddle.net/LZ8yt/