簡單的jquery菜單按鈕重複動畫，我該如何阻止？

我在網站上有簡單的動畫。當用戶將鼠標懸停在按鈕上時，會出現動畫（出現按鈕的背景）。它工作正常，但是當用戶在按鈕動畫之間開始快速移動時，就會發瘋，並在所有按鈕上重複動畫。簡單的jquery菜單按鈕重複動畫，我該如何阻止？

按鈕：

 <div id="menu_lewe"> 
      <ul> 
      //BUTTON NR. 1 
      <li class="menu"> 
       <ul> 
       <li class="button"></li> 
       <a href="#manifest"><li class="menu_glowne">MANIFEST</li></a> 
       </ul> 
      </li> 

      //BUTTON NR.2 
      <li class="menu"> 
       <ul> 
       <li class="button"></li> 
       <a href="#marki"><li class="menu_glowne">NASZE MARKI</li></a> 
       </ul> 
      </li> 


      </ul> 
     </div>

代碼爲動畫：

$('.button').css({'opacity':0}); 

$('.menu').mouseover(function(){ 
    $(this).find("li").animate({'opacity':1},200); 
}); 


$('.menu').mouseout(function(){ 
    $('.button').animate({'opacity':0},200); 
});

什麼，我應該改變，使這個按鈕的動畫更自然？

來源

2013-11-28 Lethysek

你可以嘗試添加'.stop（）''之前.animate（）'防止動畫疊加起來。例如'...停止（）。動畫（{ '不透明' ...' – Novocaine

使用.stop()：

$(this).find("li").stop().animate({'opacity':1},200); 
$('.button').stop().animate({'opacity':0},200);

它將停止在元素上當前隊列，並啓動新的動畫。

來源

2013-11-28 14:57:43

試試這個：

$('body').on('mouseover', '.menu', function() { 

    $(this).find("li").stop().animate({'opacity':1},200); 

}).on('mouseout', '.menu', function() { 

    $('.button').stop().animate({'opacity':0},200); 

});

來源

2013-11-28 15:02:35

的jQuery排隊動畫。因此，如果您快速懸停在具有這些交互動畫的元素上，它將繼續進行動畫製作，直到所有這些動畫都執行完畢。

=========================================== 
| HoverIn | starting hoverIn animation | 
| HoverOut | ...       | 
| HoverIn | ending hoverIn animation | 
| HoverOut | starting hoverOut animation | 
|   | ...       | 
|   | ending hoverOutanimation | 
|   | starting hoverIn animation | 
| ...   ...       | 
===========================================

如果你想清除已排隊的所有動畫，你可以使用.stop()：

$('.menu').mouseover(function(){ 
    $(this).find("li").stop(true).animate({'opacity':1},200); 
}); 


$('.menu').mouseout(function(){ 
    $('.button').stop(true).animate({'opacity':0},200); 
});

參數true被傳遞到清除仍在排隊，當前元素上的所有動畫。

jQuery docs on .stop()

來源

2013-11-28 15:05:03

簡單的jquery菜單按鈕重複動畫，我該如何阻止？

回答

相關問題