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

如何在jQuery中创建循环

4 个答案: