어떤 CSS 속성이 jQuery에 의해 애니메이션되고 있는지 알아보기

Question

나는이 $ 요소가 애니메이션으로 표시되는지 알려주지 만 어떤 CSS 속성이 애니메이션으로 표시되는지 확인할 수 있습니다.

Answer 1

예, step 함수를 animate() 호출에 전달하면 fx.prop을 통해 어떤 속성이 애니메이션되고 있는지 확인할 수 있습니다. 여기 JQuery와 API의 문서의 예는 지금

: 속성의 숫자 값을 각 단계

에서 애니메이션을 다음

$('li').animate({ 
    opacity: .5, 
    height: '50%' 
}, 
{ 
    step: function(now, fx) { 
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now; 
    $('body').append('<div>' + data + '</div>'); 
    } 
}); 

step 함수의 두 개의 인자

은

fx :과 같은 속성의 숫자가 인 jQuery.fx 프로토 타입 개체에 대한 참조입니다. 애니메이션 요소의 경우 210, 애니메이션 속성의 경우 start 및 end 인 경우 , 애니메이션 속성의 첫 번째 및 마지막 값은 각각 prop입니다.

이 함수는 애니메이션의 모든 "단계"에서 실행되므로 매우 자주 발생합니다. 이 속성을 사용하여 현재 애니메이션 속성 또는 유사한 애니메이션 배열을 업데이트 할 수 있습니다.