jquery 简单菜单翻转（无动画队列）

Posted 2023-05-08

【中文标题】jquery 简单菜单翻转（无动画队列）

【英文标题】：jquery simple menu roll-over (without animation queue)

【发布时间】：2010-10-27 07:36:30

【问题描述】：

我有一个简单的无序列表，其中列表项作为菜单项 我创建 jquery 只是为了有一个有趣的翻转效果 存在：

$('#nav ul ul li').hover(function()
$(this).animate( 
        marginLeft: "20px",
      , 300 );
, function()
$(this).animate( 
        marginLeft: "0px",
      , 300 );
);

这个脚本的问题是，如果你多次冲过菜单，动画队列就会建立起来。 我尝试在两者之间使用 .stop() ，但随后它也会停止其他列表项的动画，这些动画在任何情况下都应该返回默认状态。 有没有办法停止（）每个项目的队列？但不是整个列表？

【参考方案1】：

我不明白为什么 $(this).stop().animate(...) 对您不起作用，但您也可以尝试这种方法：

$(":not(:animated)", this).animate(...)

只会在当前没有动画的元素上触发动画

【讨论】：

那么你会在哪里添加 stop() 呢？因为我对停止的看法是，如果您冲过整个列表，例如第 10 项使用停止，然后将其动画向右移动 20 像素，但停止阻止先前的项目 1-9 返回默认状态。还剩 20 像素。

uuhm，Sander 我不确定我是否理解您遇到的确切问题，请您在线发布您的 js/html jsbin.com

嗯，我现在才意识到我的错误，我在动画之后添加了 .stop() @ 最后。我像你一样使用它（以前），这似乎工作正常。谢谢，是的，结果可以在@www.komtuveu.be（左侧菜单）中看到，虽然这只是带有文本的简单html ol 列表，现在我可以设置它的样式并添加图像。谢谢