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

Question

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

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