如何制作jquery无限动画? [英] How to make a jquery infinite animation?

问题描述

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

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?

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

有什么想法吗?

推荐答案

可以去掉嵌套，但是解决的方法有点胖:

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)
}

这篇关于如何制作jquery无限动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！