停止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選擇到他們的風格。