Question

我厌倦了使用Javascript长动画脚本并决定尝试使用jQuery，但似乎我对最简单的代码感到困惑。

CSS：

#menu {float: right; font: italic 16px/16px Verdana, Geneva, sans-serif;}
  ul#nav {list-style: none;}
  ul#nav li {float: left; padding-right: 10px;}
  ul#nav li a {color: white;}
  ul#subnav {float: right; list-style: none; padding: 0; display: none;}
  ul#subnav li {float: left; padding: 10px 5px; white-space: nowrap;}
  ul#subnav li a {color: white;}

脚本：

$(document).ready(function() { 
  $('.nav').hover(function() {
    $(this).find('#subnav').stop().animate({width:'toggle'},350);
  });
});

HTML：

<div id="menu">
  <ul id="nav">
    <li class="nav">
      <a href="#"><img src="images/icon-home.png" width="36" height="36"/></a>
      <ul id="subnav">
        <li><a href="#">Home</a></li>
      </ul>
    </li>
    <li class="nav">
      <a href="#"><img src="images/icon-signin.png" width="36" height="36"/></a>
      <ul id="subnav">
        <li><a href="#">Sign In</a></li>
      </ul>
    </li>
    <li class="nav">
      <a href="#"><img src="images/icon-register.png" width="36" height="36"/></a>
      <ul id="subnav">
        <li><a href="#">Create Account</a></li>
      </ul>
    </li>
    <li class="nav" style="padding-right: 0;">
      <a href="#"><img src="images/icon-mail.png" width="36" height="36"/></a>
      <ul id="subnav">
        <li style="padding-right: 0;"><a href="#">Contact Us</a></li>
      </ul>
    </li>
  </ul>
</div>

以下是示例页面： http://v1n-vampire.com/dev/jq-animation-stuck

如果你继续从左到右然后从左到左悬停在导航上，最终动画会卡住。怎么解决这个问题？

Answer 1

toggle似乎失去了目标宽度;当您停止滑出动画时，临时width会保留并由动画中的幻灯片保留。

这似乎是旧版jQuery的行为，似乎已从1.7.1（您的版本）更改为1.7.2（jsfiddle上可用的下一个版本）

如果无法升级，则删除stop()应解决此问题。更好的解决方案是在运行切换之前手动清除width样式：

$(this).find('#subnav').stop().css({width:""}).animate({width:'toggle'},350);

演示（1.6.4，无变化，休息）：http://jsfiddle.net/rYnTQ/

演示（1.7.2，无变化，有效）：http://jsfiddle.net/rYnTQ/1/

demo（1.6.4，重置修复）：http://jsfiddle.net/rYnTQ/2/

另外，请不要使用重复的ID（将id="subnav"更改为class="subnav"并相应地更改选择器）。它打破了许多框架的规范和期望。在jQuery中，如果$(selector)看到ID选择器=＆gt;，getElementById将使用{{1}}总是最多返回一个元素。

jQuery - 被困的动画

1 个答案: