如何在mouseout事件完成之前强制触发mouseover事件

Question

我正在使用jquery来制作一个简单的下拉效果。当用户将鼠标悬停在触发元素上时，下拉框将立即显示，当鼠标离开触发元素时，下拉框将淡出。

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

正如您将在this fiddle中看到的那样，如果mouseout事件（下拉框淡出）尚未完成，则不会触发mouseover事件（显示下拉框）。有没有人知道是否有办法强制下拉框出现，无论淡入淡出是否已经完成？

Answer 1

只需使用.finish()完成上一个动画：

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

fiddle