jquery 효과를 중지 하시겠습니까 ?? 또는 자바 스크립트를 중지

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> 

그리고 난이 자바 스크립트가 있습니다 : 이것처럼

$(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"); 

       } 
      }); 
     }); 

내가 처음 리 항목 위에 마우스를 올려

. 그 다음에는 리가오고 있습니다. 그러나 이제 문제가 발생합니다. 내가 빨리 물건을 가져 가면. 그 효과는 내가 미쳤어. 그리고 내가 더 빨리 그리고 빨리 타러 갈 때. 그것은 미친 효과입니다.

이 문제는 어떻게 해결할 수 있습니까?

Answer 1

아마도 요소의 현재 실행중인 애니메이션을 취소하는 stop 함수를 찾고있을 것입니다. 애니메이션을 적용하려는 요소의 siblings에서이 값을 사용합니다.

---

업데이트 : 아래 내 댓글 다시, 그것은 혼란스러운 동작을 피하고처럼 보인다는 단순히 애니메이션을 중지하는 것보다 훨씬 까다 롭습니다. 여기에 거친 테이크는 다음과 같습니다 애니메이션을 중지 할 때, 나는 그것이 slideUp/slideDown에 의해 중간 상태로 남아 얻을 수 있기 때문에 명시 적으로 height을 취소해야한다고

가

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

참고. 당신은 아마도 제가 사용했던 vars보다는 활발히 개폐되는 아이템을 추적하기 위해 클래스를 사용할 수 있습니다.

은 내가 원래에, 반면 ul를 포함하는 li에 "열기"클래스를 넣어 갔다 위에서 것을 언급해야한다, "열기"클래스는 ul 자체에 있었다. 그것은 순전히 마커 (당신이 당신의 스타일 시트에서 그것을 사용하지 않고있는 경우)였습니다. 그렇지 않다면 ul에서 "open"클래스를 사용하거나 위의 ul.open 선택기 대신에 li.open > ul 선택기를 사용하도록 스타일 시트를 업데이트하도록 위의 내용을 수정할 수 있습니다.