如何在mouseout事件完成之前強制將mouseover事件觸發

Question

我正在使用jquery進行簡單的下拉效果。 當用戶將鼠標懸停在觸發元素上時，下拉框將立即顯示，而當鼠標離開觸發元素時，該框就會消失。

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

正如您將在此小提琴中看到的那樣，問題是，如果尚未完成mouseout事件（下拉框逐漸消失），則不會觸發mouseover事件（出現下拉框）。 有誰知道是否有一種方法可以強制下拉框出現，而不管淡入淡出是否完成？

Answer 1

只需使用.finish()完成上一個動畫即可：

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

擺弄 。