如何在 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.