Javascript 动画（）不连续工作

我想在jQuery中使用

animate（）

连续地设置

#ani

动画。我的代码只工作一次。如何使此动画循环

这是我的代码，你可以看到一个在线演示

HTML

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

---

您需要使用

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

---

当前代码的意思是：

从现在开始的十分之一秒（

100ms

），开始一个2秒的动画，移动到-10px

在同一时间（另一个

100ms

），开始另一个2秒的动画，将

#ani

移动到20px

jQuery在这里做的是将第二个动画排队。您的代码可以编写为：

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

连续动画需要使用

回调

；动画完成时要调用的函数

function moveUp() {
   $('#ani').animate({ top: -10 }, 2000, moveDown);
}

function moveDown() {
   $('#ani').animate({ top: 20 }, 2000, moveUp);
}

setTimeout(moveUp, 100);

---

我想您可以看到修改后的在线演示：

使您的函数递归。

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

看一次，只需将setTimeout（）函数替换为setInterval（）

浏览此链接一次，以便更好地了解这两种乐趣的区别

---

请始终在您的答案中发布代码-以防JSFIDLE关闭或删除您的链接。大概在您的简单情况下，您可以将

循环

本身传递给嵌套的

动画

调用。默认情况下，相同元素上的动画在队列中运行，因此：

$（'#ani'）。停止（true，true）。动画（{top:'-10px'}，1000）。动画({top:'20px'}，1000）；

就足够了。提供的答案中没有一个值得你评论或投票？

$('#ani').css('position','absolute');
function loop(){
    $('#ani').animate({top:'-10px'},2000,function(){
        $('#ani').animate({top:'20px'},2000,function(){
               loop();            
        }) ;                
    })    

}
loop()               

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

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

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

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