jquery - 在 jQuery 中重复嵌套动画

Question

我有一个动画(一个带有背景图像的 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);
    });
}; 

Answer 1

修改linked example稍微，您可以使用 $.delay 在动画中引入延迟:

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

Demo

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

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

Demo

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