如何无限期循环播放此动画？答案

【问题标题】：How do I loop this animation indefinitely?如何无限期循环播放此动画？
【发布时间】：2012-12-20 18:33:13
【问题描述】：

我对 jquery 有点陌生，我设法编写了一个小动画，它淡入淡出两张图片。

我现在的问题是，在它完成循环之后，它就停止了。当它到达终点时，我需要它从头开始。它应该继续。

这是代码

$(document).ready(function() {
    $('img.banner1').fadeOut(5000);
    $('img.banner2').delay(1000).fadeIn(5000);
    $('img.banner2').delay(1000).fadeOut(5000);
    $('img.banner1').fadeIn(5000).delay(1000);
});

【问题讨论】：

将执行动画的部分放在一个函数中，该函数在完成时调用自身，或者使用 setInterval 每 x 毫秒运行一次函数。
为什么会被否决？
最近我目睹仇恨者整天投票反对
@kidwon 我也是，对于发布第一个问题的新用户来说很多。一点爱都没有……

标签： jquery animation

【解决方案1】：

这段代码将在启动最终的fadeIn 后1000ms 延迟后重新启动函数。不过，您可能需要更长的延迟，因为您需要 5000 毫秒来淡入该横幅...

function animateBanners() {
    $('img.banner1').fadeOut(5000);
    $('img.banner2').delay(1000).fadeIn(5000);
    $('img.banner2').delay(1000).fadeOut(5000);
    $('img.banner1').fadeIn(5000).delay(1000).queue(animateBanners);
}

$(document).ready(function() {
    animateBanners();
});

【讨论】：

【解决方案2】：

您可以将其移至函数并使用 setInterval 调用。

function AnimateBanners() {
    $('img.banner1').fadeOut(5000);
    $('img.banner2').delay(1000).fadeIn(5000);
    $('img.banner2').delay(1000).fadeOut(5000);
    $('img.banner1').fadeIn(5000).delay(1000);
}

$(document).ready(function() {
    setInterval(AnimateBanners, 10000); //Will run every 10 seconds
});

【讨论】：

谢谢你们。非常感谢您的帮助。