jQuery“: 애니메이션”선택기는 fadein () 및 fadeout ()를 사용하는 항목과 일치합니까?

StackOverflow https://stackoverflow.com/questions/1816637

문제

애니메이션이 발생하는 동안 목록 항목의 클릭을 방지하려고합니다. 클릭 핸들러 상단에서 다음과 같은 일을하고 싶습니다.

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 ()에 대해서도 동일하게 작동합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top