Jquery动画无限循环与下一个

Question

我希望逐个动画我的html页面的图片并将其无限循环。 我在下一个方法中使用了下面的代码，但我找不到重启函数的简便方法。如果我尝试从功能内部启动相同的功能，而不是我想让图片一个接一个地动画。如何从第一个项目中重新启动我的循环？

先谢谢，这是代码

function animationfade() {

     $('img').first().fadeIn(500).fadeOut(2000, function nextone() {
        $(this).next('img').fadeIn(500).fadeOut(2000,nextone);
      });
    animationfade();
};

animationfade();

Answer 1

首先需要等到fadeOut完成，而不是致电fadeIn。根据您的CSS，最好使用opacity选项：

(function () {
    var index = 0;
    var $imgs = $('img');

    var animationfade = function () {
        $imgs.eq(index).animate({opacity: 0}, 500, function () {
            index = (index + 1) % $imgs.length;

            $(this).animate({opacity: 1}, 2000, animationfade);
        });
    };

    animationfade();
})();