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()电话......

Answer 2

你可能想看一个jquery插件，它接近你正在尝试的内容：here：

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

2 个答案: