jquery下拉菜单的问题

Question

我是JS和Jquery的新手，我正在尝试用slideDown制作一个下拉菜单，但当我在父链接中快速地多次悬停鼠标时，事情就有点不对劲了。

代码如下：

jQuery(document).ready(function($) {
  $('li.parent').mouseenter(function() {
    $('.sub').slideDown('fast')
  });

  $('li.parent').mouseleave(function() {
    $('.sub').slideUp('fast')
  });
});

和HTML

 <li class="parent">
   <span>Produtos</span>
    <ul class="sub">
    <div class="sub-bg">
        <li>
          <a href='produtos.php?categoria=9'>Banho</a>
        </li>
        <li>
          <a href='produtos.php?categoria=7'>Cama</a>
        </li>
     </div>
    </ul>
   </li>

here是在线网站，所以你们可以看到问题所在，只需在"Produtos“buton中快速悬停即可。

谢谢!

Answer 1

如果我没有猜错你的问题，你只需要使用stop()，它将stop the currently-running animation on the matched elements，它应该是好的：

jQuery(document).ready(function($) {
    $('li.parent').mouseenter(function() {
        $('.sub').stop().slideDown('fast')
    });

    $('li.parent').mouseleave(function() {
        $('.sub').stop().slideUp('fast')
    });
});​

演示： http://jsfiddle.net/vGuHh/