jQuery在函数内重复动画

Question

我有一个简单的 Flash 动画，我正在尝试用 jQuery 重建它。我有 5 个动画被链接起来一个接一个地开始。在所有动画触发后，我需要它暂停 5 秒，自行清除并重新开始动画。我需要无限期地这样做。 这是我的代码：

$(".bars").ready(function() {
    $(".barone").animate({
        'height': '49px'
    }, 2000, function() {
        $(".bartwo").animate({
            'height': '112px'
        }, 2000, function() {
            $(".barthree").animate({
                'height': '174px'
            }, 2000, function() {
                $(".barfour").animate({
                    'height': '236px'
                }, 2000, function() {
                    $(".barfive").animate({
                        'height': '298px'
                    }, 2000, function() {
                        $('.bars div').delay(5000, function() {
                            $('.bars div').css({
                                "height": "0"
                            });
                        });
                    });
                });
            });
        });
    });
});

请原谅我的源格式，此文本字段与我不一致。

您还可以在以下位置查看示例：http://execusite.com/fazio/files/careers-banner/test.html

非常感谢任何帮助

那么这会是正确的吗？

函数 animateThis(){ $(".bars div:nth-child(1)").animate({'height':'49px'}, 2000, function() { $(".bars div:nth-child(2)").animate({'height':'112px'}, 2000, function() { $(".bars div:nth-child(3)").animate({'height':'174px'}, 2000, function() { $(".bars div:nth-child(4)").animate({'height':'236px'}, 2000, function() { $(".bars div:nth-child(5)").animate({'height':'298px'}, 2000, function() {
$('.bars div').delay(2000).css({"height" : "0"}), function() { animateThis()}; }); }); });
}); }); } $(".bars").ready(function(){animateThis()});

我为我的无知道歉，我对 jQuery 有点陌生，但仍在努力掌握语法。

Answer 1

将您的代码放在一个函数中。当最后一个动画发生时，再次触发该功能。使用链式 .delay(5000) 暂停 5 秒

sudo 代码：

function myAnimate(){
...your code.delay(5000).animate(....function(){ myAnimate() })
}

Answer 2

我会将你的动画封装在一个函数中，然后使用 JavaScript 的 setInterval(func, interval)。