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

P.S。此代码在文档就绪

上运行

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）; //相同....超时运行一次;间隔，永远

Answer 4

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

对我来说很好看。只有我会使用jQuery（“classname”）创建数组。除非您确定永远不需要更改它们，否则不要对值进行硬编码。

Answer 5

这是一种方法，只需传入一个类名数组，它就会在数组中上下循环：

var classNameSequence = ["a", "b", "c", "d", "e", "f"];

function runSequence(sequence) {
    var next = 0;

    function doFadeIn() {
        if (next >= sequence.length) {
            --next;
            doFadeOut();
            return;
        }
        $("." + sequence[next++]).fadeIn(2500, doFadeIn);
    }

    function doFadeOut() {
        if (next < 0) {
            next = 0;
            doFadeIn();
            return;
        }
        $("." + sequence[next--]).fadeOut(2500, doFadeOut);
    }

    doFadeIn();
}

runSequence(classNameSequence);

你可以在这里看到它：http://jsfiddle.net/jfriend00/cRZxk/。

Answer 6

FWIW，这是一个疯狂的方法。

var cycle = function(selector, timeout) {
    var i = 0, step = 2,
        faders = $(selector).map(function (i, val) {
            return [
                function() { $(val).fadeIn(timeout) },
                function() { $(val).fadeOut(timeout) }
            ];
        }),
        nextStep = function() {
            if ( (i >= faders.length && step > 0) || (i <= 0 && step < 0) ) {
                step *= -1; i += step/2;
            }
            faders[i](); i += step;
            setTimeout(nextStep, timeout);
        };
    nextStep();
};

将其命名为：

cycle(['.c1', '.c2', '.c3'], 1000);

请参阅a demo on jsFiddle。

如何进行此代码循环？

6 个答案: