jQuery 如何制作jquery无限动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4713477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a jquery infinite animation?
提问by Mauro74
I'm trying to implement a jQuery function with an infinite loop to animate the body background with 3 colours. I cannot think of a nice and clean solution. Something like this?
我正在尝试使用无限循环来实现一个 jQuery 函数，以使用 3 种颜色为主体背景设置动画。我想不出一个好的和干净的解决方案。像这样的东西？
$(document).ready(function(){
$('body').animate({backgroundColor:'#ffcc00'}, 500, function(){
$('body').animate({backgroundColor:'#eeeeee'}, 500, function(){
$('body').animate({backgroundColor:'#3b5998'}, 500);
});
});
});
Any idea?
任何的想法？
采纳答案by Diodeus - James MacFarlane
You can eliminate the nesting, but the solution is a little fatter:
您可以消除嵌套，但解决方案有点胖：
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)
}
回答by Cesar
$(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();
});
回答by fitorec
$(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();
});
回答by lintabá
$(".elementsToAnimate").each(function setAnim(){
$(this).
animate({backgroundColor:'#ffcc00'},500).
animate({backgroundColor:'#eeeeee'},500).
animate({backgroundColor:'#3b5998'},500,setAnim);
});
回答by David Faber
I would rather use an event-driven approach:
我宁愿使用事件驱动的方法：
$(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');
});
Watch this solution in action:
观看此解决方案的实际操作：
回答by powtac
Call the animate functions in the callback of animate().
在 animate() 的回调中调用 animate 函数。
See this example in the jQuery forum
在jQuery 论坛中查看此示例
jQuery.fn.fadeInOut = function() {
var newOpacity = this.is(":visible") ? 0 : 1;
this.animate({ opacity: newOpacity }, function() {
$(this).fadeInOut();
});
return this;
};
$("#mydiv").fadeInOut();
回答by Val
function blabla(){
$('body').animate({backgroundColor:'#ffcc00'}, 500, function(){
$('body').animate({backgroundColor:'#eeeeee'}, 500, function(){
$('body').animate({backgroundColor:'#3b5998'}, 0,function (){
setTimeout(blabla,500);
});
});
});
}
UNTESTED
未经测试
回答by mate64
I highly recommend the jQuery timing plugin (2KB)(GitHub& Docs).
我强烈推荐jQuery 计时插件 (2KB)( GitHub& Docs)。
It provides easy-to-use infinite animations and much more. Have a look:
它提供了易于使用的无限动画等等。看一看：
$(document).ready(function(){
$('body').animate({backgroundColor:'#ffcc00'}).wait(500)
.animate({backgroundColor:'#eeeeee'}).wait(500)
.animate({backgroundColor:'#3b5998'}).wait(500)
});
回答by Perera1987
Try this : http://jsfiddle.net/hBBbr/
试试这个：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();
});
回答by GGets
I know it's years later but I think this could still be a problem for someone just like it was for me with jquery v1.10.2. Anyway, after a few hours of trying to deal with it, I ended up using the following code for multiple layered backgrounds with this plugin:
我知道这是几年后的事了，但我认为这对某人来说仍然是一个问题，就像我使用 jquery v1.10.2 一样。无论如何，在尝试处理它几个小时后，我最终使用以下代码使用此插件的多层背景：
// 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);
The naming scheme is as follows: I create nested DIVs and give them IDs in the HTML. In the JS part, the same IDs are used for keying the properties in the object containing all the self-calling-on-animation-finish functions. Demo here.
命名方案如下：我创建嵌套的DIV并在 HTML 中给它们ID。在 JS 部分，相同的ID用于对包含所有动画完成自调用函数的对象中的属性进行键控。演示在这里。
