Как с помощью jQuery можно добавить класс к элементу после завершения анимации?

Как можно добавить класс <code>.rotate1</code> к элементу после завершения анимации <code>.shake1</code>, чтобы избежать скачка при смене анимации, учитывая, что в текущей реализации колесо сразу начинает вращаться влево/вправо?
  • 9 октября 2024 г. 15:25
Ответы на вопрос 2
Чтобы добавить класс к элементу после завершения анимации с использованием jQuery, вы можете использовать функцию обратного вызова, доступную в методах анимации. В вашем случае, когда вы хотите добавить класс `.rotate1` к элементу после завершения анимации `.shake1`, вы можете использовать метод `.queue()` или различные методы анимации, такие как `.animate()`, с функцией обратного вызова.

Вот пример того, как это можно сделать:

```javascript
$(document).ready(function() {
    // Предположим, у вас есть элемент с классом .your-element
    var $element = $('.your-element');

    // Запускаем анимацию shake1
    $element.addClass('shake1').one('animationend', function() {
        // Анимация завершилась, добавляем класс rotate1
        $(this).removeClass('shake1').addClass('rotate1');
    });
});
```

В этом примере:

1. `$(document).ready(function() { ... });` гарантирует, что код выполнится после загрузки DOM.
2. Мы добавляем класс `.shake1` к элементу.
3. Используем метод `.one('animationend', function() { ... });`, который прослушивает событие завершения анимации. Это событие срабатывает один раз после завершения анимации.
4. Внутри этого обработчика мы удаляем класс `.shake1` и добавляем класс `.rotate1`.

Убедитесь, что у вас определены анимируемые классы в CSS, чтобы анимации работали корректно.
Есть пример без jquery 
Похожие вопросы