jQuery“: 애니메이션”선택기는 fadein () 및 fadeout ()를 사용하는 항목과 일치합니까?
문제
애니메이션이 발생하는 동안 목록 항목의 클릭을 방지하려고합니다. 클릭 핸들러 상단에서 다음과 같은 일을하고 싶습니다.
if(!$(this).is(:animated)) {
// handle click code here
}
위의 if 문에서 'bang'(!)를 주목하십시오. 나는 테스트하지 않았지만 이것이 효과가 있다고 가정합니다. 내가 확실하지 않은 것은 '.is (: animated)'가 fadein () 및 fadeout ()를 통해 애니메이션을받는 요소에 대해 실행될 때 true를 반환 할 것인지의 여부입니다. jQuery가 .animate () 함수를 가지고 있다는 것을 알고 있습니다. 애니메이션은 확실히 해당 기능을 사용하여 애니메이션 된 요소에 대해 작동하지만 fadein () 및 fadeout ()를 사용하는 사람들과 함께 작동합니까? 감사.
업데이트: 일부 극적인 비판 후, 모든 것이 잘 보이고 모든 위대한 후속 조치와 편집에 대한 Reponders에게 감사합니다. 결국, 나는 예, : 애니메이션이 fadein () 및 fadeout ()를 사용하여 애니메이션과 일치한다는 것을 알았습니다. 마지막 확인은 원래 게시되었습니다.
if(!$(this).is(:animated)) {
// handle click code here
}
.. 일부 경우에 제안 된대로 .not ()를 사용하는 것보다. (현재 게시 된대로 작동한다고 생각하지만). 다시 한 번 감사드립니다.
해결책
예, :animated
jQuery가 만드는 모든 종류의 애니메이션에 대해 True를 반환합니다. 또한 jQuery를 사용하는 경우 애니메이션하는 플러그인에 대해서도 가능합니다. animate
기능.
그러나 jQuery를 사용하기 위해 코드 만 다르게 코드를 작성할 수 있습니다.
편집하다 그만큼 not
기능은 반대가 아닙니다 is
. 노드를 걸러 내지 만 계속 평가하는 jQuery 객체를 반환합니다. true
. 사용하려면 not
내가 원래 제안했듯이 기능하면 추가해야합니다. .length
시험 :
if( $(this).not(':animated').length ) {
// Handle click code here
}
그렇지 않으면 기능을 원래 게시 한 OP로 사용하십시오.
if( !$(this).is(':animated')) {
// Handle click code here
}
다른 팁
: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 );
};
});
당신은 거기에 if 문을 전혀 할 필요가 없습니다. '코드를 클릭하기 전에 .not (': animated ')를 체인 할 수 있습니다.
예를 들어, 이러한 페이드는 DIV가 애니메이션을받는 과정에 있지 않은 경우에만 효과가있을 것입니다. 따라서 불쾌한 대기열 문제를 제거합니다.
$('a#show_me').toggle(function() {
$('div#the_money').not(':animated').fadeIn();
}, function() {
$('div#the_money').not(':animated').fadeOut();
});
.click ()에 대해서도 동일하게 작동합니다.