Jquery 如何使代码循环？

我想知道如何使下面的代码循环，我知道我需要某种回调/设置间隔，但我如何实现这一点？非常感谢

$('.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上运行

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

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

---

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

（函数（）{
var all=[1,2,3]；
var rev=all.reverse（）；
var doFadeOut=功能（索引）{
$（'.+版本[索引]）.淡出（2500，功能（）{
索引++；
if（索引<版本长度）{
衰减（指数）；
}否则{
多法丹（0）；
}
});
};
var doFadeIn=函数（索引）{
$（'..+all[index]）.fadeIn（2500，函数（）{
索引++；
如果（索引<全部长度）{
多法丹指数；
}否则{
衰减（0）；
}
});
};
多法丹（0）；
})();

将其从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（'myCrazyLop（）'，x）；//同样的。。。。超时运行一次；间隔，永远

（函数（）{
(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);
})();

var all=[1,2,3]；
var rev=all.reverse（）；
var doFadeOut=功能（索引）{
$（'.+版本[索引]）.淡出（2500，功能（）{
索引++；
if（索引<版本长度）{
衰减（指数）；
}否则{
多法丹（0）；
}
});
};
var doFadeIn=函数（索引）{
$（'..+all[index]）.fadeIn（2500，函数（）{
索引++；
如果（索引<全部长度）{
多法丹指数；
}否则{
衰减（0）；
}
});
};
多法丹（0）；
})();

我觉得不错。只有我会使用jQuery（“classname”）创建数组。

---

不要硬编码值，除非您确定永远不需要更改它们。

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

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

var classNameSequence=[“a”、“b”、“c”、“d”、“e”、“f”]；
函数runSequence（sequence）{
var-next=0；
函数doFadeIn（）{
如果（下一步>=序列长度）{
--其次；
doFadeOut（）；
返回；
}
$（“+”序列[next++]）.fadeIn（2500，doFadeIn）；
}
函数doFadeOut（）{
如果（下一个<0）{
next=0；
doFadeIn（）；
返回；
}
$（“+”序列[下一步--]）。淡出（2500，淡出）；
}
doFadeIn（）；
}
运行序列（classNameSequence）；

---

你可以在这里看到它的作用：。

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

---

看。

我不明白这个问题。你会不会做和有3个元素时一样的事情，只是你会淡入/淡出3个元素。这是我必须很快组合起来的东西，我只是初学者。我会试试这个，谢谢。@maxedison:我是说这个解决方案根本无法扩展。如果您有100个元素，则必须手动键入所有元素。这很好。我知道你在说什么，这不是一个很好的练习，但速度要快得多，而且我所做的只需要3个元素上的动画。@Blender--绝对不会缩放。但是OP并没有暗示他有超过3种元素，或者说在未来它可以发展到超过3种元素，这是一种更好的模式。深度嵌套的动画代码是一个坏主意。感谢大家的热烈响应，尽管它没有达到我想要的效果（动画不是无视觉的，我想最后会跳过淡入/淡出），但我知道我的嵌套是一个糟糕的做法，但它实现了我想要的效果，我的代码只会作为一次性代码使用。@Luke:我参加聚会有点晚了，我的回答并不十分严肃，但它很有效，动画也很完美这不应该只是对我答案的评论吗？

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