如何在jQuery中创建循环

Question

我需要循环显示2个div元素，一个接一个。

HTML文字其他文字

jQuery的

$('#1').animate({opacity:0},500)
    .animate({opacity:1},500)
    .delay(2000)
    .animate({opacity:0},500);

两者之间应该去哪里？ 因此，首先我们为＃1运行动画，然后才为＃1 DIV启动动画

$('#2').animate({opacity:0},500)
    .animate({opacity:1},500)
    .delay(2000)
    .animate({opacity:0},500);

以及如何使无限循环呢？

Answer 1

您可以使用animate()的回调。 动画结束时将运行回调。

$('#one').animate({}, 'fast', function(){ 
    //Callback 
    $('#two').animate({ });
});

Answer 2

对于无限循环，您可以将每个div的动画放在自己的函数中，然后从另一个动画结尾的完整回调中调用该函数。 （比说明容易显示：）

function do1() {
   $('#1').animate({opacity:0},500)
       .animate({opacity:1},500)
       .delay(2000)
       .animate({opacity:0},500,function() {
            do2();
       });
}
function do2() {
   $('#2').animate({opacity:0},500)
          .animate({opacity:1},500)
          .delay(2000)
          .animate({opacity:0},500,function() {
            do1();
       });
}

​do1();​

演示： http ： //jsfiddle.net/nnnnnn/HQ5ys/1

或者只是将代码放在一个可以自我调用的函数中：

function myAnimate() {
   $('#1').animate({opacity:0},500)
       .animate({opacity:1},500)
       .delay(2000)
       .animate({opacity:0},500,function() {
          $('#2').animate({opacity:0},500)
             .animate({opacity:1},500)
             .delay(2000)
             .animate({opacity:0},500,function() {
                myAnimate();
          });
}

​myAnimate();

http://jsfiddle.net/nnnnnn/HQ5ys/2/

Answer 3

您可以为此使用jQuery的when-then函数。

$.when(
    function(){
        $('#1').animate({opacity:0},500)
            .animate({opacity:1},500)
        .delay(2000)
        .animate({opacity:0},500);})
.then(function(){
    $('#2').animate({opacity:0},500)
    .animate({opacity:1},500)
    .delay(2000)
    .animate({opacity:0},500);
});

Answer 4

使用完整的回调函数，例如：

setInterval(function () {
$("#1").animate({opacity:0}, 500, function() {
  $("#2").animate({opacity:0},500);
}), 5000); //runs every 5 secs