Question

I have a dropdown box that operates with the following:

$(document).on("mouseenter mouseleave", "#dropdown", function(event){

    if (event.type == 'mouseenter')
        $('#dropdown ul.children').slideDown(1000);
     else
        $('#dropdown ul.children').slideUp(1000);

    //stop();?
});

However if you move the mouse out and in fast then you can make another event run before the other has finished, how can I ensure the current on finishes before the next starts?

If I use .stop() then it’s possible to mouseover and move the mouse back off and on and it will just restart the animation from the beginning making it look jerky?

Answer 1

Try this:

$(document).on("mouseenter mouseleave", "#dropdown", function(event){

    if (event.type == 'mouseenter')
        $('#dropdown ul.children').stop(true, true).slideDown(1000);
     else
        $('#dropdown ul.children').stop(true, true).slideUp(1000);

});

see jQuery .stop()

DEMO