Question

我正在尝试构建一个脚本，以便动画的第二部分只在第一部分完成后才会开始。我试图用if语句完成这个并在每个循环后递增一个变量。理论上，只有在第一个语句完成计数之后才应该第二个开始。

function anim1() {
    if (i < cnt) {
        $imgOne.delay(1000).animate({bottom : '-=60px'}, 1000);
        i += 1;
        setTimeout(function() {anim1()}, 1000);
        console.log("The number is " + i);
    } else {
        cb();
    }
}

如果您观看控制台，它会过快地计算，第二个动画会很快开始。无论如何减慢增量以便第二个动画正确执行？

Answer 1

animate采用完整的回调参数

 $imgOne.delay(1000).animate({
    bottom : '-=60px'
  }, 1000, function() {
    anim1();
 });

Answer 2

使用回调：

var _count    = 10,
    _distance = 60;

(function anim(){
    if(_count !== 0){
        _count-= 1;
    }
    $imgOne.animate({
        bottom:'-=' + _distance + 'px'
    },1000,function(){
        anim(); 
    });
})();

演示：http://jsfiddle.net/AlienWebguy/wkgYv/（改变了动画的方向，这样你就可以看到视口中发生了什么）

在循环时改变Javascript的速度增量？

2 个答案: