停止jquery效果？或者停止javascript

Question

我有一个很大的ul列表。就像这样：

<ul class="eerstelaag"> 
    <li class=""><a title="?" href="/">? (14)</a> 
     <ul class="tweedelaag" style="display: none;"> 
      <li><a href="/">Roerstaafjes</a></li> 
      <li><a href="/">Thee favorieten</a></li> 
      <li><a href="/">Siropen</a></li> 
     </ul> 
    </li> 
    <li class=""><a title="?" href="/">? (14)</a> 
     <ul class="tweedelaag" style="display: none;"> 
      <li><a href="/">Roerstaafjes</a></li> 
      <li><a href="/">Thee favorieten</a></li> 
      <li><a href="/">Siropen</a></li> 
     </ul> 
    </li> 
    <li class=""><a title="?" href="/">? (14)</a> 
     <ul class="tweedelaag" style="display: none;"> 
      <li><a href="/">Roerstaafjes</a></li> 
      <li><a href="/">Thee favorieten</a></li> 
      <li><a href="/">Siropen</a></li> 
     </ul> 
    </li> 
</ul> 

，我有这个JavaScript：

$(function() 
     { 
      var button = $("#assortiment ul.eerstelaag > li"); 

      button.hover(function() 
      { 

       if(button.hasClass("open")) 
       { 
        var menuitem = $(this).find("ul"); 
        menuitem.slideUp(600); 

        button.removeClass("open");  
       } 
       else 
       { 
        var menuitem = $(this).find("ul"); 
        menuitem.slideDown(600); 

        button.addClass("open"); 

       } 
      }); 
     }); 

当我将鼠标悬停在第一李项。然后那个里的ul会来和表演。但现在出现这个问题。当我快速悬停在李项目上时。效果我疯了。当我越来越快地盘旋时。这是一个疯狂的效果。

我该如何解决这个问题？

Answer 1

您可能正在寻找stop函数，该函数将取消元素上当前运行的任何动画。您可以在要制作动画的元素的siblings上使用此选项。

---

更新：回复我下面的评论，它看起来像避免混乱的行为比简单地停止动画很多麻烦。这里有一个粗略的看法：

jQuery(function($) { 

    var button = $("#assortiment ul.eerstelaag > li"), 
     opening = null, 
     closing = null; 

    button.mouseover(function() { 
    var $this = $(this), 
     open; 

    if (!$this.hasClass('open')) { 
     // If there's an active close operation, cut it short 
     if (closing) { 
     closing.stop().css("height", "").hide(); 
     closing = null; 
     } 

     // If there's an active opening operation, turn it into 
     // a closing operation 
     if (opening) { 
     closing = opening; 
     opening = null; 
     closing.stop().css("height", "").slideUp(600, clearClosing); 
     } 

     // Is any sibling open? If so, unmark it it... 
     open = $this.siblings('li.open'); 
     open.removeClass('open'); 
     if (!closing) { 
     // ...and since the sibling wasn't still actively 
     // opening (that's handled above), close it 
     closing = open.find('ul:first'); 
     closing.stop().css("height", "").slideUp(600, clearClosing); 
     } 

     // Open 
     $this.addClass('open'); 
     opening = $this.find('ul:first'); 
     opening.slideDown(600, clearOpening); 
    } 
    }); 

    // Callback used when we're done closing, to clear 
    // our tracker 
    function clearClosing() { 
    if (closing && closing[0] === this) { 
     closing = null; 
    } 
    } 

    // Callback used when we're done opening, to clear 
    // our tracker 
    function clearOpening() { 
    if (opening && opening[0] === this) { 
     opening = null; 
    } 
    } 
}); 

Live example

注意，停止动画的时候，我必须明确地清除height，因为它可以通过slideUp/slideDown被甩处于中间状态。您可能可以使用课程来跟踪积极开启/关闭的项目，而不是使用的变量。

我要指出，在我穿上含有ul的li“开放”类，而在你原来就上述情况，“开放”类是在ul本身。如果它纯粹是一个标记（你没有在你的样式表中使用它），那么很棒;如果没有，我希望你可以修改上述回去使用的ul“开放”级，或更新样式表来使用li.open > ul选择，而不是ul.open选择到他们的风格。