jQuery的：防止堆積動畫

我知道還有其他幾個職位與此解決方案，但我現在的問題是有點不同。jQuery的：防止堆積動畫

我有一個元素的兩個事件 - mouseenter和mouseleave。第一個將我的元素的顏色改變爲光線，另一個變回黑暗，這會產生閃爍的效果。

問題是，當我進出幾次的事件疊加，它閃爍很多次，即使沒有新的事件被觸發。我想阻止，但.stop()沒有幫助。

這裏的漁獲：我想觸發1個閃存不管是什麼，但不超過1。因此，當有人在移動/輸出 - 事件mouseenter將被解僱，之後mouseleave和之後沒有..直到另一個輸入/輸出被觸發。

我想這可以通過鎖定（不聽）新的事件，當進/出觸發了，直到效果完成，但我不知道如何解除綁定和再次綁定。是不是有什麼lockEvent()什麼的？

來源

2012-02-22 Tony Bogdanov

您是否已經使用.stop（true）或.stop（true，true）？

來源

2012-02-22 23:02:32 kinakuta

不，我還沒有..它wonderfuly工作！ – 2012-02-22 23:14:28

您可以嘗試只設置一個布爾值VAR和射擊只有假的... ...

var anim = { 
    animating: false, 
    over: function(){ 
     if(!anim.animating) 
     { 
      anim.animating = true; 
      // do you animation here 
      // and set your animating bool to false before calling outro... 
      $('#elem').animate({/*some css change*/ }, 1000, function(){ 
       anim.animating = false; 
       anim.out(); 
      }); 
     } 
    }, 
    out: function(){ 
     if(!anim.animating) 
     { 
      anim.animating = true; 
      //do your outro animation here 
      $('#elem').animate({/*some css change*/ }, 1000, function(){ 
       anim.animating = false; 
      }); 
     } 
    } 
};

然後讓你的聽衆來電anim.over和anim.out ...

$('#elem').on('mouseenter', function(){ 
    anim.over(); 
}).on('mouseleave', function(){ 
    anim.out(); 
});

這你可以在輸入時調用動畫，當前奏完成時，它會自動啓動動畫動畫。

來源

2012-02-22 23:02:49

有僞類jQuery的":animated" 你可以使用它在第一次的mouseenter甚至像：

if ($(this).is(':animated')) { 
    return false; 
}

，以防止更多的動畫

來源

2012-02-22 23:08:42

jQuery的：防止堆積動畫

回答

相關問題