jQuery ": animated"selector는 fadeIn() 및 fadeOut()을 사용하는 항목과 일치합니까?

Question

애니메이션이 실행되는 동안 목록 항목에 대한 클릭을 방지하려고합니다.

if(!$(this).is(:animated)) { 
    // handle click code here 
} 

참고 '쾅'위의 if 문에서 (!) : 내 클릭 핸들러의 상단에 그래서, 나는 이런 식으로 뭔가를하고 싶어. 나는 테스트를하지 않았지만 이것이 효과가 있다고 가정합니다. 필자가 잘 모르는 부분은 fadeIn() 및 fadeOut()을 통해 애니메이션을 적용한 요소에 대해 '.is (: animated)'가 true를 반환하는지 여부입니다. 나는 jQuery가 .animate() 함수를 가지고 있으며, animated가 해당 함수를 사용하여 애니메이션 된 요소에 대해 확실히 작동하지만, fadeIn() 및 fadeOut()을 사용하는 요소와 함께 작동 할 것인가? 감사.

업데이트 : 극적으로 잘못된 소식을 남기고 모든 것이 잘되는 것처럼 보이며 훌륭한 후속 조치와 수정 사항에 대한 훌륭한 견해에 감사드립니다. 결국 jQuery 소스가 .animate()를 사용하여 이러한 효과를 얻기 때문에 fadeIn() 및 fadeOut()을 사용하여 해당 요소를 애니메이션으로 일치시킵니다. 내 최종 점검이 아니라 원래 게시했습니다 :

if(!$(this).is(:animated)) { 
    // handle click code here 
} 

() (I이이 같은 현재 게시 작동합니다 생각하지만) 어떤 경우에 제안 된 바와 같이이 아니요 사용하는 것보다 ..rather. 다시 한번 감사드립니다.

Answer 1

예, :animated는 jQuery를 (가) 작성하는 애니메이션의 모든 종류에 대해 true를 반환합니다. 또한 jQuery animate 함수를 사용하는 경우 애니메이션이 적용되는 모든 플러그인에서이 작업을 수행합니다. not 기능 is의 반대하지

편집 :

그러나, 당신은 jQuery를 활용하는 다른 코드를 단지 핀치를 작성할 수 있습니다. 노드를 필터링하지만 여전히 true으로 평가되는 jQuery 객체를 반환합니다. 나는 원래 제안으로 not 기능을 사용하려면, 당신은 시험에 .length을 추가해야합니다 :

if($(this).not(':animated').length) { 
    // Handle click code here 
} 

을 그렇지 않으면, 원래 게시 된 OP로 함수를 사용

if(!$(this).is(':animated')) { 
    // Handle click code here 
} 

Answer 2

:animate은 fadeOut이라는 요소와 일치합니다.

jQuery 소스를 살펴보면 fadeOut은 animate으로 간단히 나타납니다.
는 그것은 다음과 같이 정의되어 :

// Generate shortcuts for custom animations 
jQuery.each({ 
    slideDown: genFx("show", 1), 
    slideUp: genFx("hide", 1), 
    slideToggle: genFx("toggle", 1), 
    fadeIn: { opacity: "show" }, 
    fadeOut: { opacity: "hide" } 
}, function(name, props){ 
    jQuery.fn[ name ] = function(speed, callback){ 
     return this.animate(props, speed, callback); 
    }; 
}); 

Answer 3

하는 당신은 필요가 없습니다 if 문을 거기에 넣는 것. '클릭 코드'앞에 .not (': animated') 체인을 연결할 수 있습니다.

예를 들어 div가 애니메이션 처리 중이 아니었기 때문에 이러한 페이드 만 작동하므로 불쾌한 대기열 문제를 해결할 수 있습니다.

$('a#show_me').toggle(function() { 
    $('div#the_money').not(':animated').fadeIn(); 
}, function() { 
    $('div#the_money').not(':animated').fadeOut(); 
}); 

.click()에서도 마찬가지입니다.