如何在 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);
});

How to force mouseover event to fire before mouseout event completes