在jQuery中重复嵌套动画 [英] Repeating a nested animation in jQuery

问题描述

我有一个动画(带有背景图像的div)，其中有另一个动画作为回调.

I have an animation (a div with a background image) which has another animation as callback.

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

A car drives from right to left, then turns and drives back. all with some delay. I want the whole animation run again infinite times.

以下是代码:

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

推荐答案

反复修改链接的示例，您可以使用 $ .delay 在动画中引入延迟:

Modifying the linked example slightly, you can introduce delays into your animation using $.delay:

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

This is the simplest form, but does introduce a delay at the start of the animation:

演示

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

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

To remove that delay, replace the last completion callback with a setTimeout and remove the initial delay:

演示

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

修改

您的功能以使用此样式将类似于:

Your Function modified to use this style would look something like:

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

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

If you prefer to leave your animation function intact, you can simply call the entry point again on completion of the internal animation:

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

这篇关于在jQuery中重复嵌套动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！