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

← →
↑