Javascript 多次启动jQuery函数

我的网站中的菜单结构如下

<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>

---

但是hover function只调用一次。如何让它一次又一次地工作？

我认为问题在于，您从未从列表项中删除“动画震动”类。我假设你的动画shake类有一个一次性的动画来震动它。因此，一旦您将类添加到项目中，它就再也不能添加它了，因为它已经有了它。要解决这个问题，您需要在某个时候删除它，最有可能是在鼠标停止悬停时

尝试将on（）与“mouseenter”和“mouseleave”事件一起使用，而不是使用hover（）：

或者，您可以尝试在再次添加类之前快速删除该类，尽管我不是100%这样做可以，但您可能需要在两者之间设置一个超时延迟

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

使用后一种方法会在物品悬停一次后，将其几乎永久地留在shake类中，这可能不是最好的方法

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

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

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