Jquery 下一个动画无限循环

Question

我想一张一张地为我的 html 页的图片制作动画，并无限循环播放。我将下面的代码与 next 方法一起使用，但找不到重新启动该功能的简单方法。如果我尝试从函数内部启动相同的函数，但该函数不起作用，因为我希望图片一张接一张地制作动画。如何从第一项开始使用下一项重新开始循环？

在此先感谢，这是代码

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

Jquery 下一个动画无限循环

Jquery animation infinite loop with next

jquery

animation

next

infinite