多次启动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");
});

后一种方式将鼠标悬停一次后，您的物品几乎会永久地处于摇动类中，这可能不是最好的方式。