Question

我有以下代码：

$(document).ready(function() {
    $('#nav li').hover(

    function() {
        // Show the sub menu
        $('ul', this).slideDown(300);
    }, function() {
        //hide its submenu
        $('ul', this).slideUp(200);
    });

});

但是，如果我快速翻转一个导航菜单项，说50次..它将继续显示动画（向上和向下）50次像循环！...

我尝试添加像.stop()这样的$('ul', this).stop().slideDown(300); - 但它只是停止显示的菜单....所以任何想法将它放在代码或其他方式来做它？

Answer 1

api for stop说停止匹配元素上当前正在运行的动画，这正是您所需要的。

在下面的代码段中，我也提供了两个参数。这些是：

clearQueue 一个布尔值，指示是否也要删除排队的动画。默认为false。
jumpToEnd 一个布尔值，指示是否立即完成当前动画。默认为false。

通常代码看起来像（这就是我自己的方式）：

$(document).ready(function () {     
  $('#nav li').hover(function () {
    // Show the sub menu
    $('ul', this).stop(true,true).slideDown(300);
  }, 
  function () {
  //hide its submenu
    $('ul', this).stop(true,true).slideUp(200);         
  });
});

修改

我更新了代码并将stop设置为使用true，true而不是true，false，这使菜单按预期工作。尽管如此，它会看起来很小，因为第二个参数会强制动画结束。

滑块不断重复和放大如果我翻转多次

1 个答案: