我如何让这段代码循环？

Question

我想知道如何使下面的代码循环，我知道我需要一些回调/setInterval，但我如何实现它？非常感谢！

$('.1').fadeIn(2500, function() {
    $('.2').fadeIn(2500, function() {
        $('.3').fadeIn(2500, function() {
            $('.3').fadeOut(2500, function() {
                $('.2').fadeOut(2500, function() {
                    $('.1').fadeOut(2500, function() {
                    });
                });
            });
        });
    });
});

附注:此代码在准备就绪的文档上运行

Answer 1

根据OP的评论，这应该是一个无限循环的淡入淡出。请尝试以下操作

(function () {
  var all = [1, 2, 3];
  var rev = all.reverse();

  var doFadeOut = function (index) {
    $('.' + rev[index]).fadeOut(2500, function () {
      index++;
      if (index < rev.length) {
        doFadeOut(index);
      } else {
        doFadeIn(0);
      }
    });
  };

  var doFadeIn = function (index) {
    $('.' + all[index]).fadeIn(2500, function () {
      index++;
      if (index < all.length) {
        doFadeIn(index);
      } else {
        doFadeOut(0);
      }
    });
  };

  doFadeIn(0);
})();

Answer 2

只需将其全部放入一个函数中，然后让该函数调用自身：

function doFade(){
$('.1').fadeIn(2500, function() {
    $('.2').fadeIn(2500, function() {
        $('.3').fadeIn(2500, function() {
            $('.3').fadeOut(2500, function() {
                $('.2').fadeOut(2500, function() {
                    $('.1').fadeOut(2500, function() {
                         doFade()
                    });
                });
            });
        });
    });
});
}

Answer 3

把它从document.ready中拿出来。让它成为它自己的函数，并在document.ready中用setInterval或setTimeout调用它：

function myCrazyLoop() {
    $('.1').fadeIn(2500, function() {
        $('.2').fadeIn(2500, function() {
           $('.3').fadeIn(2500, function() {
                $('.3').fadeOut(2500, function() {
                   $('.2').fadeOut(2500, function() {
                       $('.1').fadeOut(2500, function() { });
                   });
                });
           });
        });
    });
}

然后，在document.ready中：

setInterval('myCrazyLoop()',x); // where x is your interval in miliseconds

或setTimeout('myCrazyLoop()'，x)；//相同....超时运行一次；间隔，永远