多次啟動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");
        });

但是，懸停功能只能調用一次。 如何使它一直不止一次地工作？

Answer 1

我相信問題是您永遠不會從列表項中刪除“動畫搖動”類。 我假設您的動畫搖動類具有一次搖動它的動畫。 因此，一旦您將類添加到您的項目中，它就永遠無法再添加，因為它已經有了它。 要解決此問題，您可能需要在某個時間刪除它，最有可能在鼠標停止懸停在它上面時刪除。

代替使用hover（），嘗試將on（）與“ mouseenter”和“ mouseleave”事件一起使用：

$("#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");
});

后一種方式將鼠標懸停一次后，您的物品幾乎會永久地處於搖動類中，這可能不是最好的方式。