Search code examples
javascriptjqueryhoveronmouseovermouseout

How to force mouseover event to fire before mouseout event completes

I am using jquery to make a simple dropdown effect. The dropdown box will appear instantly when the user hovers over the trigger element, and fade out when the mouse leaves the trigger element.

$('ul > li').hover(function(){
    $(this).find('#dropDown').show();
},function(){
    $(this).find('#dropDown').fadeOut(1000);
});

The problem, as you will see in this fiddle is that the mouseover event (dropdown box appears) will not fire if the mouseout event (dropdown box fades out) has not yet completed. Does anyone know if there is a way to force the dropdown box to appear regardless of whether the fade has completed?

Solution

  • Just use .finish() to finish the previous animation:

    $('ul > li').hover(function(){
    $(this).find('#dropDown').finish().show();
},function(){
    $(this).find('#dropDown').fadeOut(1000);
});

    fiddle.