火了jQuery函數不止一次

Question

我有一個菜單下面的結構在我的網站

<div class="header"> 
     <ul> 
      <li id="menu__lnk_one"><a href="#">Home</a></li> 
      <li><a href="#">Our Story</a></li> 
      <li><a href="#">Tools</a></li> 
      <li><a href="#">Technology</a></li> 
      <li><a href="#">Pricing</a></li> 
      <li><a href="#">Contact</a></li> 
      <li><a href="#">Careers</a></li> 
     </ul> 
    </div> 

和我有聯繫的jQuery和寫了下面的代碼，添加一個類menu__link_one項目

$("#menu__lnk_one").hover(function(){ 
      $(this).addClass("animated shake"); 
     }); 

但懸停funcrion只被調用一次。如何使它不止一次地工作？

Answer 1

我相信問題是你永遠不會從你的列表項中刪除「動畫搖攝」類。我假設您的動畫動畫類有一次動畫，可以動搖它。所以一旦你將這個類加入到你的物品中，它就再也不能再添加它，因爲它已經擁有了它。要解決這個問題，你需要在某個時候刪除它，很可能只要你的鼠標停在它上面。

而不是使用懸停（）的，請嘗試使用（）與「的mouseenter」和「鼠標離開」事件：

$("#menu__lnk_one").on('mouseenter', function() { 
    $(this).addClass("animated shake"); 
}); 

$("#menu__lnk_one").on('mouseleave', function() { 
    $(this).removeClass("animated shake"); 
}); 

或者，你可以嘗試快速去除類權再次添加它之前，雖然我不是100％，這將工作，你可能需要在兩者之間的超時延遲。

$("#menu__lnk_one").hover(function() { 
    $(this).removeClass("animated shake").addClass("animated shake"); 
}); 

做這後者的方式將與抖動類留下您的項目幾乎永久已經盤旋一次後，這可能不是最好的辦法。