javascript - 多次启动 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

我认为问题在于您从未从列表项中删除“动画摇动”类。我假设你的动画摇动类有一个一次性的动画来摇动它。因此，一旦您将类添加到您的元素中，它就永远无法再添加它，因为它已经有了。要解决此问题，您需要在某个时间将其删除，最有可能是在您的鼠标停止悬停在其上时。

尝试将 on() 与“mouseenter”和“mouseleave”事件一起使用，而不是使用 hover():

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

以后一种方式进行操作会使您的元素在悬停一次后几乎永久保留摇动类，这可能不是最佳方式。