Как запустить css анимацию по клику через jquery?
Как запустить css анимацию по клику через jquery?
2 ответа
@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 секунды.
@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 секунду.