javascript - 如何修复 jQuery 中不稳定的动画

Question

我用 jQuery 构建了一个简单的菜单

http://vanquish.websitewelcome.com/~toberua/

这是菜单示例

<ul>
  <li id="your-residences">
    <strong>Your Residences</strong>

    <ul>
      <li class="menu-1"><a href=
      "/~toberua/your-residences/deluxe-ocean-front-bure/">Deluxe
      Ocean Front Bure</a></li>

      <li class="menu-2"><a href=
      "/~toberua/your-residences/premium-ocean-front-bure/">Premium
      Ocean Front Bure</a></li>
    </ul>
  </li>

  <li id="your-island">
    <strong>Your Island</strong>

    <ul>
      <li class="menu-1"><a href=
      "/~toberua/your-island/where-is-toberua/">Where is
      Toberua?</a></li>

      <li class="menu-2"><a href=
      "/~toberua/your-island/island-facilities/">Island
      Facilities</a></li>

      <li class="menu-3"><a href=
      "/~toberua/your-island/massage-and-spa/">Massage &amp;
      Spa</a></li>
    </ul>
  </li>
</ul>

这是我的 jQuery:

var menu = {

  init: function() {

    $('#header > ul > li').hoverIntent(function() {
      $(this).find('ul').show().css({opacity: '0.3'}).height(0).animate({height: '88px', opacity: '1.0'}, 800);

    }, function() {

      $(this).find('ul').animate({height: '0', opacity: '0.3'}, 400, function() { $(this).hide();  }); 

    });

  }

}

这会产生一些古怪的行为。例如，有时菜单会向下滑动，然后继续向上和向下滑动。其他麻烦是菜单完美地向下滑动，然后闪烁到空白背景，然后再次返回。

有人可以指出我可能做错了什么吗？

谢谢

Answer 1

我立即注意到的唯一问题是，您的代码会很高兴地对另一个动画进行排队，而不会清除已经运行的动画的队列 - 因此，如果您稍微晃动一下鼠标，就会打开菜单并反复关闭，恶作剧风格!

幸运的是，这是一个简单的解决方法:只需调用 stop()在每个 animate() 之前打电话...