요소가 애니메이션되고 있는지 jQuery로 어떻게 알 수 있습니까?

페이지에서 일부 요소를 이동하려고합니다. 애니메이션이 발생하는 동안 요소에 "overflow : hidden"을 적용하고 애니메이션이 완료되면 "overflow"를 "auto"로 되돌리고 싶습니다.

jQuery에는 일부 요소가 애니메이션되는지 여부를 결정하는 유틸리티 기능이 있지만 문서의 어느 곳에서도 찾을 수 없습니다.

if( $(elem).is(':animated') ) {...}

더 많은 정보 : https://api.jquery.com/animated-selector/

또는:

$(elem)
    .css('overflow' ,'hidden')
    .animate({/*options*/}, function(){
        // Callback function
        $(this).css('overflow', 'auto');
    };

또는 애니메이션이 아닌 것이 있는지 테스트하려면 "!"를 추가하면됩니다.

if (!$(element).is(':animated')) {...}

css애니메이션을 사용하고 특정을 사용 하여 애니메이션을 할당하는 class name경우 다음과 같이 확인할 수 있습니다.

if($("#elem").hasClass("your_animation_class_name")) {}

그러나 애니메이션이 끝난 후 애니메이션을 처리하는 클래스 이름을 제거하고 있는지 확인하십시오!

이 코드는 class name애니메이션이 완료된 후 제거하는 데 사용할 수 있습니다 .

$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){ 
        $(this).removeClass("your_animation_class_name");
});

애니메이션 요소에 CSS를 적용하려면 :animated의사 선택기를 사용하여 다음과 같이 할 수 있습니다.

$("selector").css('overflow','hidden');
$("selector:animated").css('overflow','auto');

출처 : https://learn.jquery.com/using-jquery-core/selecting-elements/

$('selector').click(function() {
  if ($(':animated').length) {
    return false;
  }

  $("html, body").scrollTop(0);
});