如何制作jquery无限动画？答案

【问题标题】：How to make a jquery infinite animation?如何制作jquery无限动画？
【发布时间】：2011-06-10 10:52:21
【问题描述】：

我正在尝试实现一个带有无限循环的 jQuery 函数，以用 3 种颜色为身体背景设置动画。我想不出一个好的和干净的解决方案。像这样？

$(document).ready(function(){                
     $('body').animate({backgroundColor:'#ffcc00'}, 500, function(){
        $('body').animate({backgroundColor:'#eeeeee'}, 500, function(){
           $('body').animate({backgroundColor:'#3b5998'}, 500);
       });
   });
});

有什么想法吗？

【问题讨论】：

标签： jquery loops jquery-animate

【解决方案1】：

$(document).ready(function(){
    function animate() {
        $('body').animate({backgroundColor:'#ffcc00'}, 500, function(){
            $('body').animate({backgroundColor:'#eeeeee'}, 500, function(){
                $('body').animate({backgroundColor:'#3b5998'}, 500, function(){
                    animate();
                });
            });
        });
    }
    animate();
});

【讨论】：

这不会在一段时间后导致堆栈溢出（没有双关语）吗？
好点，@AndyHin！最初我也是这么想的，但答案是：不。这是因为 .animate() 将动画添加到动画队列中（连同有关在完成时应调用哪个函数的信息），而不是立即执行代码继续下一条语句。

【解决方案2】：

你可以消除嵌套，但解决方案有点胖：

var cols = "#ffcc00,#eeeeee,#3b5998".split(",")
var cPos = 0

$(document).ready(function() {
   swapC()
}    

function swapC() {
    $('body').animate({ backgroundColor:cols[cPos] }, 500)
    cPos++
    if (cPos == cols.length) {
        cPos = 0
    }
    window.setTimeout(function() { swapC() }, 500)
}

【讨论】：

不要使用超时（这是不可靠的），而是使用animate() 回调函数。你冒着竞争条件的风险。

【解决方案3】：

$(document).ready(function(){
    colors = ['#FFB30C', '#58EC00', '#0087EC', '#EEEEEE', '#FF5A00' ]
    var i = 0;
    animate_loop = function() {
            $('body').animate({backgroundColor:colors[(i++)%colors.length]
            }, 500, function(){
                        animate_loop();
            });
    }
    animate_loop();
});

演示：http://jsfiddle.net/bHEVr/

【讨论】：

【解决方案4】：

$(".elementsToAnimate").each(function setAnim(){
    $(this).
            animate({backgroundColor:'#ffcc00'},500).
            animate({backgroundColor:'#eeeeee'},500).
            animate({backgroundColor:'#3b5998'},500,setAnim);
});

【讨论】：

【解决方案5】：

我宁愿使用事件驱动的方法：

$(document).ready(function(){
  $('body').on('color1', function () {
    $(this).animate({backgroundColor:'#ffcc00'}, 500, function(){
      $(this).trigger('color2');
    });
  });

  $('body').on('color2', function () {
    $(this).animate({backgroundColor:'#eeeeee'}, 500, function(){
      $(this).trigger('color3');
    });
  });

  $('body').on('color3', function () {
    $(this).animate({backgroundColor:'#3b5998'}, 500, function(){
      $(this).trigger('color1');
    });
  });

  // Kick-off the infinite loop by firing one of the events
  $('body').trigger('color2');
});

观看此解决方案的实际效果：

http://jsfiddle.net/perituswebdesign/f5qeo6db/1/

【讨论】：

【解决方案6】：

在 animate() 的回调中调用 animate 函数。

请参阅jQuery forum 中的此示例

jQuery.fn.fadeInOut = function() {
        var newOpacity = this.is(":visible") ?  0 : 1;
        this.animate({ opacity: newOpacity }, function() {
                $(this).fadeInOut();
        });
        return this;
};

$("#mydiv").fadeInOut();

【讨论】：

【解决方案7】：

function blabla(){
 $('body').animate({backgroundColor:'#ffcc00'}, 500, function(){
        $('body').animate({backgroundColor:'#eeeeee'}, 500, function(){
           $('body').animate({backgroundColor:'#3b5998'}, 0,function (){
               setTimeout(blabla,500);
           });
       });
   });

}

未经测试

【讨论】：

【解决方案8】：

我强烈推荐 jQuery 计时插件 (2KB) (GitHub & Docs)。

它提供易于使用的无限动画等等。看看：

$(document).ready(function(){    

 $('body').animate({backgroundColor:'#ffcc00'}).wait(500)
          .animate({backgroundColor:'#eeeeee'}).wait(500)
          .animate({backgroundColor:'#3b5998'}).wait(500)
});

【讨论】：

jQuery 现在有 .delay() 函数，它使（附加的）.wait() 的时间相同。
错了。 .delay() 已经集成到版本 1.4 中。它设置了一个计时器来延迟队列中后续项目的执行，但它不提供无限循环。

【解决方案9】：

试试这个：http://jsfiddle.net/hBBbr/

$(document).ready(function(){

animate_loop = function animate_loop(){
        $( "#animated_banner" ).animate({
            opacity: 0.1, 

          }, 1000,function(){
               $( "#animated_banner").animate({ opacity: 1},1000)
                 animate_loop();
        } );    
}

animate_loop();  

});

【讨论】：

【解决方案10】：

我知道那是几年后的事了，但我认为这对某些人来说仍然是个问题，就像我使用 jquery v1.10.2 一样。无论如何，经过几个小时的尝试处理后，我最终将以下代码用于具有this plugin 的多层背景：

// Self-calling functions for animation auto-repeat
var cssanimfx={
    bgb:function(o){
      o=$(o?o:this);
      o.css({backgroundPosition:'0px 0px'}).animate({backgroundPosition:"3000px -3000px"},500000,'linear',cssanimfx[o.attr('id')]);
    },
    bgm:function(o){o=$(o?o:this);o.css({backgroundPosition:'0px 0px'}).animate({backgroundPosition:"3000px -3000px"},250000,'linear',cssanimfx[o.attr('id')])},
    bgf:function(o){o=$(o?o:this);o.css({backgroundPosition:'0px 0px'}).animate({backgroundPosition:"3000px -3000px"},50000,'linear',cssanimfx[o.attr('id')])}
    // ...
}
// Initialize animation
for(id in cssanimfx)cssanimfx[id]('#'+id);

命名方案如下：我创建嵌套的DIV，并在HTML 中赋予它们ID。在 JS 部分，相同的 ID 用于键入包含所有自调用动画完成功能的对象中的属性。 Demo here.

【讨论】：