Как запустить css анимацию по клику через jquery?

Пользователь

от jeremy_larkin , в категории: JavaScript , 8 месяцев назад

Как запустить css анимацию по клику через jquery?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jaylen.trantow , 8 месяцев назад

@jeremy_larkin 

Вы можете использовать метод .click() для элемента, который вы хотите обрабатывать по клику, и затем добавить или удалить класс с анимацией с помощью метода .toggleClass(). Например:


HTML:

1
2
<button id="myButton">Нажми меня!</button>
<div id="myDiv">Это будет анимировано по клику</div>


CSS:

1
2
3
4
5
6
7
8
9
#myDiv {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s ease-in-out;
}
.animate {
  transform: rotate(360deg);
}


jQuery:

1
2
3
4
5
$(document).ready(function() {
  $('#myButton').click(function() {
    $('#myDiv').toggleClass('animate');
  });
});


В этом примере по клику на кнопку с id "myButton" будет добавляться или удаляться класс "animate" у элемента с id "myDiv", что вызовет анимацию поворота на 360 градусов в течение 1 секунды.