javascript - animate() 不能连续工作

Question

我想在 jQuery 中#ani连续使用动画。animate()我的代码只工作一次。如何制作这个动画循环？

这是我的代码，您可以在此处查看在线演示。

HTML

<div id="ani">animation</div>

脚本

$('#ani').css('position','absolute');

setTimeout(function(){
    $('#ani').animate({top:'-10px'},2000)
},100);

setTimeout(function(){
    $('#ani').animate({top:'20px'},2000)
},100);

Answer 1

$('#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/

Answer 2

您需要使用setInterval(), notsetTimeout()并调用动画的第二部分作为第一部分的回调。尝试这个：

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

示例小提琴

Answer 3

您当前的代码所说的是：

1. 从现在开始十分之一秒 ( 100ms)，开始一个 2 秒的动画，移动#ani到 -10 像素。
2. 在同一时间（另一个100ms），开始另一个 2 秒动画，移动#ani到 20 像素。

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);

Answer 4

使您的函数递归。

$('#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);
}​

演示

Answer 5

看到这个http://jsfiddle.net/9hN2g/8/，只需将 setTimeout() 函数替换为 setInterval() 。

浏览此链接一次，以更好地了解这两个有趣的 diff b/w 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);