animated 선택자

:animated 선택자는 현재 애니메이션에 참여 중인 요소를 선택합니다. 효과 모듈이 없는 사용자 정의 jQuery 빌드를 사용하는 경우, :animated 사용은 오류를 발생시킵니다. :animated가 CSS 사양에 속하지 않기 때문에, 최신 브라우저에서 성능을 향상시키려면 순수 CSS 선택자를 사용하여 먼저 요소를 필터링한 다음 .filter(':animated')를 적용하는 것이 더 좋습니다.

문법

애니메이션에 참여 중인 요소를 이렇게 선택합니다:

$(':animated');

예제

animateIt 함수를 사용하여 정사각형 중 하나에 애니메이션이 실행되도록 해봅시다. #change 버튼을 클릭할 때마다 애니메이션되는 정사각형의 색상이 녹색에서 빨간색으로 그리고 다시 돌아오게 됩니다 - toggleClass 메서드로 colored 클래스를 제거하고 추가함으로써:

<button id="change">change</button>

<div></div>
<div id="test"></div>

div {
	background: green;
	border: 1px solid #AAA;
	width: 80px;
	height: 80px;
	margin: 0 5px;
	float: left;
}
div.colored {
	background: red;
}

$('#change').click(function() {
	$('div:animated').toggleClass('colored');
});

function animateIt() {
	$('#test').slideToggle('slow', animateIt);
}

animateIt();

함께 보기

slideToggle 메서드,
숨겨진 요소를 보여주고 보여진 요소를 숨깁니다
toggleClass 메서드,
CSS 클래스를 추가하거나 제거합니다
find 메서드,
이미 찾은 요소 내부에서 요소를 검색합니다