Я пытаюсь получить div для постоянной анимации:
$(document).ready(function() {
function arrowmovement() {
setTimeout(function() {
$("#downarrowimg").animate({
'margin-top': "-=30px"
});
}, 500);
setTimeout(function() {
$("#downarrowimg").animate({
'margin-top': "+=30px"
});
}, 500);
}
arrowmovement();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="downarrow">
<img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>Это работает только один раз. Что я делаю не так и как мне это исправить?
9 ответов
Вот чистое решение CSS, которое непрерывно анимирует #downarrow:
@keyframes downarrowanimation {
0% {margin-top: 30px;}
50% {margin-top: -30px;}
100% {margin-top: 30px;}
}
#downarrow {
animation: downarrowanimation 1s ease-in-out infinite;
}<div id="downarrow">
<img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>Вы можете просто вызвать функцию arrowmovement в конце каждой анимации:
function arrowmovement(direction) {
$("#downarrowimg").animate({
'margin-top': "+="+ (30 * direction) +"px"
}, 500, function() {
arrowmovement(direction * -1);
});
}
$(document).ready(function() {
arrowmovement(1);
});
Демонстрация: https://jsfiddle.net/louisbros/dhwoejon/
Есть несколько способов сделать это, я предлагаю использовать setInterval () , посмотрите пример ниже.
Надеюсь это поможет.
var down=true;
setInterval(function() {
if( down ){
$( "#downarrowimg" ).animate({
'margin-top' : "-=30px"
}, function() {
down=false;
});
}else{
$( "#downarrowimg" ).animate({
'margin-top' : "+=30px"
}, function() {
down=true;
});
}
},500);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="downarrow">
<img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>$(document).ready(function() {
function arrowUp() {
$("#downarrowing").animate(
{'margin-top': "-=30px"}, 600, function(){arrowDown()});
}
function arrowDown() {
$("#downarrowing").animate(
{'margin-top': "+=30px"}, 600, function(){arrowUp()});
}
arrowUp();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="downarrowing" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>JQuery действительно плох в анимации. Пакет анимации Greensock (GSAP) - это фантастическая и легкая библиотека анимаций, в которую вы могли бы заглянуть.
TweenMax.to($("div"), .5, {y: "+=50", ease: Linear.easeNone, yoyo: true, repeat: -1});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js"></script>
<div style="width: 50px; height: 50px; background-color: red;"></div>Одна строка делает все, что вам нужно. Если вы хотите более сложное смягчение, используйте класс TimelineMax для объединения анимаций.
var timeline = new TimelineMax({repeat: -1});
timeline.to($("div"), .5, {y: "+=50", ease: Power2.easeOut});
timeline.to($("div"), .5, {y: "-=50", ease: Power2.easeOut});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js"></script>
<div style="width: 50px; height: 50px; background-color: red;"></div>Вы можете использовать полную функцию метода animate, и вам не нужен тайм-аут здесь.
Также может быть предложена чистая CSS-анимация, подобная предложенной Rounin .
< Сильный > полный Тип: Функция () Функция, которая вызывается после завершения анимации, вызывается один раз для соответствующего элемента.
Вот пример.
$( document ).ready(function() {
function arrowmovement() {
var d = ($( "#downarrowimg" ).css('margin-top') === "-30px") ? "+" : "-";
$( "#downarrowimg" ).animate({
'margin-top' : d + "=30px"
}, 500, // duration
function() { // complete fn
arrowmovement();
});
}
arrowmovement();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="downarrow">
<img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>Это просто понять.
$(document).ready(function (argument) {
var operator = '-';
setInterval(arrowMovement,500);
function arrowMovement() {
if(operator == '-') {
operator = '+'
} else {
operator = '-'
}
$('#downarrow').animate({'margin-top':operator+10}, 500);
}
});
Почему бы вам просто не использовать CSS? Вы получаете всю приятность с дополнительным преимуществом ускорения анимации на GPU.
@keyframes bounce {
from {margin-top: 30px;}
to {margin-top: -30px;}
}
.arrow {
animation-name: bounce;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
}<div id="downarrow">
<img class="arrow" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>Вам нужно использовать setInterval ().
$(document).ready(function() {
var repeatIt = setInterval(arrowmovement, 1000);
function arrowmovement() {
setTimeout(function() {
$("#downarrowimg").animate({
'margin-top': "-=30px"
});
}, 500);
setTimeout(function() {
$("#downarrowimg").animate({
'margin-top': "+=30px"
});
}, 500);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="downarrow">
<img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>Установите его в переменную, чтобы вы могли остановить его:
function abortTimer() { // to be called when you want to stop the timer
clearInterval(repeatIt);
}
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.
En Español