Estoy tratando de implementar una función jQuery con un bucle infinito para animar el fondo del cuerpo con 3 colores. No puedo pensar en una solución agradable y limpia. ¿Algo como esto?
$(document).ready(function(){ $('body').animate({backgroundColor:'#ffcc00'}, 500, function(){ $('body').animate({backgroundColor:'#eeeeee'}, 500, function(){ $('body').animate({backgroundColor:'#3b5998'}, 500); }); }); });¿Alguna idea?
$(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(); });Puedes eliminar el anidamiento, pero la solución es un poco más gorda:
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) }$(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(); });Demostración: http://jsfiddle.net/bHEVr/