반응형
요소가 애니메이션화되고 있는지 여부를 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);
});
언급URL : https://stackoverflow.com/questions/724911/how-do-i-find-out-with-jquery-if-an-element-is-being-animated
반응형
'code' 카테고리의 다른 글
자바스크립트 함수에 다양한 수의 인수를 보내는 것이 가능합니까? (0) | 2023.08.16 |
---|---|
MVC, jQuery 및 오류 처리에 대한 모범 사례 (0) | 2023.08.16 |
[UIColor colorWithRed:green:blue:alpha:]을(를) UITableView 구분 기호 색상과 함께 사용할 수 없습니까? (0) | 2023.08.16 |
코드 생성된 UIView에 UIBizerPath 그리기 (0) | 2023.08.16 |
클래스 제거 시 CSS 애니메이션을 되돌릴 수 있습니까? (0) | 2023.08.16 |