带有下一个的jQuery动画无限循环答案

【问题标题】：Jquery animation infinite loop with next带有下一个的jQuery动画无限循环
【发布时间】：2015-10-11 23:40:07
【问题描述】：

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

先谢谢了，这里是代码

function animationfade() {

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

animationfade();

【问题讨论】：

一个简单的方法是将刚刚隐藏的图像附加到末尾。所以总是有下一个，而不是创建全局变量并在每次迭代时检查它们。

标签： jquery animation next infinite

【解决方案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();
})();

【讨论】：