0

我有点厌倦了用于动画的 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

如果您继续从左到右然后再从左到左悬停在导航上，最终动画将卡住。如何解决这个问题？

4

1 回答 1

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/

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

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

于 2012-12-11T05:33:48.117 回答