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

Question

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

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

问题是，正如您在这把小提琴中所看到的，如果鼠标退出事件(下拉框逐渐消失)尚未完成，鼠标结束事件(出现下拉框)将不会触发。有没有人知道是否有一种方法来强制下拉框出现，无论是否已完成淡出？

Answer 1

只需使用.finish()完成前面的动画：

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

小提琴。