Как сделать данную анимацию циклом на jquery?
2 ответа
от
velma ,
год назад
@jaylen.trantow
Для создания анимации циклом на jQuery вы можете использовать функцию animate() и метод setInterval().
Пример кода для создания анимации циклом на jQuery:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
$(document).ready(function() { function animateElement() { // Анимируйте элемент, используя функцию animate() и требуемые свойства CSS $('#element').animate({ // задайте требуемые свойства CSS и их значения opacity: '0.5', left: '+=50' }, 1000, function() { // Этот код будет выполнен после окончания анимации // Вы можете добавить дополнительные действия здесь, если это необходимо, или просто оставить пустым }); } function startAnimation() { // Запустить анимацию animateElement(); // Установите интервал времени для повторения анимации // в данном случае анимация будет выполняться каждые 2 секунды setInterval(function() { animateElement(); }, 2000); } startAnimation(); }); |
Вышеуказанный код начнет анимацию элемента с id "element", а затем повторит ее каждые 2 секунды. Вы можете настроить анимацию и интервал между анимациями, изменяя значения в функции animateElement() и setInterval().
от
greyson ,
5 месяцев назад
@jaylen.trantow
Пример кода для создания анимации циклом на jQuery:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="animatedElement" style="width: 100px; height: 100px; background-color: red; position: absolute"></div>
<script>
$(document).ready(function() {
function animateElement() {
$('#animatedElement').animate({
left: '+=50',
opacity: '0.5'
}, 1000, function() {
// Этот код будет выполняться после завершения анимации
});
}
function startAnimation() {
animateElement();
setInterval(function() {
animateElement();
}, 2000);
}
startAnimation();
});
</script>
</body>
</html>
|
Приведенный выше код создает анимированный элемент, который смещается на 50 пикселей вправо и меняет свою прозрачность на половину за 1 секунду. Эта анимация повторяется каждые 2 секунды благодаря использованию метода setInterval().
15