我想在jQuery中使用#ani
继续为animate()
制作动画。我的代码只能运行一次。如何制作这个动画循环?
这是我的代码,您可以看到在线演示here。
HTML
<div id="ani">animation</div>
SCRIPT
$('#ani').css('position','absolute');
setTimeout(function(){
$('#ani').animate({top:'-10px'},2000)
},100);
setTimeout(function(){
$('#ani').animate({top:'20px'},2000)
},100);
答案 0 :(得分:2)
$('#ani').css('position','absolute');
function loop(){
$('#ani').animate({top:'-10px'},2000,function(){
$('#ani').animate({top:'20px'},2000,function(){
loop();
}) ;
})
}
loop()
我认为您可以看到修改后的在线演示:http://jsfiddle.net/9hN2g/5/
答案 1 :(得分:1)
您需要使用setInterval()
,而不是setTimeout()
,并将动画的第二部分称为第一部分的回调。试试这个:
function animate() {
$('#ani').stop(true, true).animate({ top: '-10px' }, 1000, function() {
$('#ani').stop(true, true).animate({ top: '20px' }, 1000)
})
}
animate(); // on load
setInterval(animate, 2000); // set to run continously
答案 2 :(得分:1)
您当前的代码所说的是:
100ms
),开始将#ani
移动到-10px的2秒动画。100ms
),开始另一个2秒动画,将#ani
移动到20px。jQuery在这里做的是排队第二个动画。您的代码可以写成:
setTimeout(function(){
$('#ani').animate({top:'-10px'}).animate({top:'20px'}),2000);
},100);
连续动画需要使用callbacks
;动画完成时调用的函数。
function moveUp() {
$('#ani').animate({ top: -10 }, 2000, moveDown);
}
function moveDown() {
$('#ani').animate({ top: 20 }, 2000, moveUp);
}
setTimeout(moveUp, 100);
答案 3 :(得分:0)
使你的函数递归。
$('#ani').css('position', 'absolute');
anim1();
function anim1() {
setTimeout(function() {
$('#ani').animate({
top: '-10px'
}, 2000, function(){
anim2();
});
}, 100);
}
function anim2() {
setTimeout(function() {
$('#ani').animate({
top: '20px'
}, 2000, function(){
anim1();
});
}, 100);
}
答案 4 :(得分:0)
看一次http://jsfiddle.net/9hN2g/8/,只需用setInterval()替换setTimeout()函数。
通过这个链接一次,以便更好地理解差异这两个有趣的http://www.whadiz.com/what-is.aspx/programming/javascript/settimeout-versus-setinterval
$('#ani').css('position','absolute');
setInterval(function(){
$('#ani').animate({top:'-10px'},2000)
},100);
setInterval(function(){
$('#ani').animate({top:'20px'},2000)
},100);