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

我相信问题是你永远不会删除动画摇动＆＃34;列表项中的类。我假设你的动画摇晃类有一次摇动它的动画。因此，一旦将类添加到项目中，它就永远不会再添加它，因为它已经拥有它。要解决此问题，您需要在某个时间将其删除，很可能只要您的鼠标停留在鼠标上方就可以将其删除。

不要使用hover（），而是使用on（）和＆＃34; mouseenter＆＃34;和＆＃34; mouseleave＆＃34;事件：

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

以后一种方式进行操作会使你的物品在摇晃过一次之后几乎永久地留下震动类，这可能不是最佳方式。

不止一次启动jQuery函数

1 个答案: