Селектор animated

Селектор :animated выбирает элементы, которые в данный момент задействованы в анимации. Если вы используете пользовательскую jQuery сборку без модуля эффектов, то использование :animated вызовет ошибку. Так как :animated не относится к CSS спецификации, то для улучшения производительности в современных браузерах лучше в начале отфильтровать элементы с использованием чистого css-селектора, а затем применить .filter(':animated').

Синтаксис

Так мы выбираем элементы, задействованные в анимации:

$(':animated');

Пример

Давайте сделаем так, чтобы на одном из квадратов была запущена анимация с помощью функции animateIt. При каждом клике по кнопке с #change цвет анимированного квадрата будет менятся с зеленого на красный и обратно - путем удаления и добавления класса colored методом toggleClass:

<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,
который ищет элементы внутри уже найденных