jQuery селектор :animated

Определение и применение

jQuery селектор :animated выбирает все элементы, которые находятся в процессе анимации в тот момент, когда селектор используется.

jQuery синтаксис:

$( ":animated" )

Добавлен в версии jQuery

Селектор в CSS

Пример использования

Пример использования jQuery селектора :animated

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<div class="test">jQuery</div>
<div class="test2">CSS</div>
<div class="test">jQuery</div>
<button>Измени цвет</button>

main.js

JavaScript

$(document).ready(function () {
    animateDiv()
    function animateDiv() {
        $('.test').animate({ width: '100%' }, 2500, 'linear')
        $('.test').animate({ width: '0%' }, 2500, 'linear', animateDiv)
    }
    $('button').click(function () {
        $(':animated').toggleClass('red')
    })
})

style.css

CSS

.test {
    width: 0px;
    height: 50px;
    background-color: green;
}
.test2 {
    width: 0px;
    height: 50px;
    background-color: green;
    animation: iLikeToMoveIt 5s infinite linear;
}
@keyframes iLikeToMoveIt {
    0% {
        width: 0px;
    }
    50% {
        width: 100%;
    }
    100% {
        width: 0%;
    }
}
.red {
    background-color: red;
}

В этом примере с использованием селектора :animated мы выбираем все элементы, которые находятся в процессе анимации, которая была вызвана с использованием библиотеки jQuery (первый и третий блок). Обратите внимание, что наш второй блок анимирован с использованием CSS анимации, но он не будет выбран и стилизован с использованием селектора :animated.

При нажатии на кнопку происходит добавление селектора класса (анимируемым с использованием библиотеки jQuery блокам), который устанавливает цвет заднего фона красный, при следующем нажатии класс убирается, и так по кругу (jQuery функция toggleClass).

Более подробную информацию о CSS анимации вы можете получить в CSS справочнике, а именно в свойстве animation.