animate()不能连续工作

时间:2012-05-04 08:27:28

标签: javascript jquery

我想在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);

5 个答案:

答案 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

Example fiddle

答案 2 :(得分:1)

您当前的代码所说的是:

  1. 从现在开始的十分之一秒(100ms),开始将#ani移动到-10px的2秒动画。
  2. 在同一时间(另一个100ms),开始另一个2秒动画,将#ani移动到20px。
  3. 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);
}​


DEMO

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