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

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

от jeremy_larkin , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от jaylen.trantow , год назад

@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 секунды.

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

от marlen , 8 месяцев назад

@jeremy_larkin 

Прекрасный пример! Вот еще один способ запустить CSS анимацию по клику через jQuery, используя метод .toggleClass () для добавления класса с анимацией:


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
.animate {
  animation: myAnimation 1s ease-in-out;
}

@keyframes myAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}


HTML:

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


jQuery:

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


Этот пример добавляет класс "animate" к элементу с id "myDiv" при каждом клике на кнопку с id "myButton", что запускает CSS анимацию масштабирования элемента на 1.1 раза и возвращение к изначальному размеру за 1 секунду.