僅動畫一次

Question

我使用jQuery .animate（）來移動一個項目，但它似乎以100px的增量多次移動。是因爲鼠標懸停嗎？

var ww = $(window).width(); 

$(document).on('mouseover', '#myTarget', function() { 
    var dp = $(this).offset().left; 

    if ((ww - dp) < 150) { 
     $('.myDiv.active').animate({left:'-=100px'},500); 
    } 
}); 

Answer 1

改變它 $(document).on('mouseenter', '#myTarget', function() { 會更好。每當鼠標進入或離開元素或其中一個子元素時，觸發事件mouseover。這不會發生在mouseenter。 example here顯示了這一點。

請參閱this answer瞭解相似的問題以及所提供示例的來源。

Answer 2

當鼠標懸停在目標上時，會重複發送鼠標懸停事件。你可能想的mouseenter和鼠標離開

Answer 3

使用jquery.one

$(document).one('mouseover', '#myTarget', function() { 
    var dp = $(this).offset().left; 

    if ((ww - dp) < 150) { 
    $('.myDiv.active').animate({left:'-=100px'},500); 
    } 
});