2

我有一个动画（div带有背景图像），它有另一个动画作为回调。

一辆汽车从右向左行驶，然后转弯并返回。都有一些延迟。我希望整个动画再次无限次运行。

这是代码：

var tempoPolente = 10000;
var viewport = $(window).width() + 300;

// Animation 
var polenteAnim = function() { 
    $("#polente").removeClass('flip').animate({"right": "+="+viewport}, tempoPolente, 'linear',
            function() {
                setTimeout(function() {
                    $("#polente").addClass("flip").animate({"right": "-="+viewport}, tempoPolente, 'linear');
                }, 1000);
    });
};
4

2 回答 2

1

稍微修改链接的示例，您可以使用$.delay将延迟引入动画：

这是最简单的形式，但确实在动画开始时引入了延迟：

演示

function loop() {
    $('.bouncer').delay(1000)
                 .animate({'top': '500'}, 1000)
                 .delay(1000)
                 .animate({top: 0}, 1000, loop);
}
loop();

要消除该延迟，请将最后一个完成回调替换为 setTimeout 并消除初始延迟：

演示

function loop() {
    $('.bouncer').animate({'top': '500'}, 1000)
                 .delay(1000)
                 .animate({top: 0}, 1000, function() {
                     setTimeout(loop, 1000);
                 });
}
loop();

修改为使用此样式的函数如下所示：

var polenteAnim = function() { 
    $("#polente").removeClass('flip')
                 .animate({"right": "+="+viewport}, tempoPolente, 'linear')
                 .delay(1000)
                 .addClass("flip")
                 .animate({"right": "-="+viewport}, tempoPolente, 'linear', function() {
                     setTimeout(polenteAnim, 1000);
                 });
};

如果您希望保持动画功能不变，您可以在内部动画完成后再次调用入口点：

var polenteAnim = function() { 
    $("#polente").removeClass('flip').animate({"right": "+="+viewport}, tempoPolente, 'linear',
            function() {
                setTimeout(function() {
                    // Add polente as the completion callback here...
                    $("#polente").addClass("flip").animate({"right": "-=" + viewport}, tempoPolente, 'linear', function () {
                        setTimeout(polenteAnim, 1000);
                    });
                }, 1000);
    });
};
于 2013-08-21T15:48:22.040 回答
0

我认为一个简单recursion的就足以做无限循环。

尝试这个。

var tempoPolente = 10000;
var viewport = $(window).width() + 300;

// Animation 
var polenteAnim = function() { 
    $("#polente").removeClass('flip').animate({"right": "+="+viewport}, tempoPolente, 'linear',
            function() {
                setTimeout(function() {
                    $("#polente").addClass("flip").animate({"right": "-="+viewport}, tempoPolente, 'linear');
                }, 1000);
    });
polenteAnim();  //recursion
};
于 2013-08-21T15:30:34.133 回答