Have Geek Brain

JQuery lag not working 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 will happen 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 keep the dropdown visible for a second or two after moving the mouse, and I would also like to prevent recurring events to prevent artifacts and "funnies". if you have to quickly and quickly get the mouse out of the div

+2


a source to share


3 answers


Problem: .stop (). If you do this, this works:



http://jsfiddle.net/LZ8yt/

+1


a source


Your calls are stop

not put on the animation queue - they run immediately. I'm not sure if you really need them in your hover out routine.



edit remote stupidity

+1


a source


You can always go lo-tech with setTimeout.

var dropDownElement = $(this);
setTimeout(function()
{
    dropDownElement.fadeTo('fast', 0.1);
    // Other Code
}, 1000);
0


a source






More articles:


All Articles