運行太多次的JQuery懸停事件處理程序

Question

我有一個鼠標懸停時激活的下拉菜單。它有一個動畫，需要200毫秒才能完成，如果你將鼠標移開重新回到200毫秒，它將再次完成200毫秒。

如果您在下拉菜單上運行鼠標並關閉10秒鐘，然後移動鼠標，則下拉菜單將不斷下拉並備份，直到您的鼠標位於下拉菜單中， 。

有誰知道我該如何解決這個問題？

var dropdown = function() { 
    $('.dropdown').hover(function() { 
     $('.inbutton').animate({ 
      top: '-188px' 
     }, 200); 
     $('.dr2button').animate({ 
      top: '0px' 
     }, 200); 
    }, function() { 
     $('.inbutton').animate({ 
      top: '-122px' 
     }, 200); 
     $('.dr2button').animate({ 
      top: '-61px' 
     }, 200); 
    }); 
}; 


$(document).ready(dropdown); 

Answer 1

Preppend的stop()功能animate()

$('.inbutton').stop().animate({ 
     top: '-122px' 
    }, 200); 

使這個在所有動畫功能。

更多信息：

https://api.jquery.com/stop/