在jquery中创建循环背景动画

时间:2010-03-01 23:49:02

标签: jquery animation recurring

我想要的是:

页面加载时 - 背景颜色为红色 10秒后,bgColor变为绿色,淡出淡出动画... 再过10秒后,它变为橙色......然后再变为红色等等......

有人可以提供帮助

1 个答案:

答案 0 :(得分:7)

setinterval与更改背景的回调一起使用:

$("document").ready(function() {
    var colours = [ "blue", "orange", "pink" ];
    var counter = 0;
    function cycleBackground() {
        $("body").animate({ backgroundColor: colours[counter] }, 500 );
        counter++;
        if(counter == colours.length) {
            counter = 0;
        }
    }
    setInterval(cycleBackground, 10000);
});

如果要在颜色之间平滑循环,则需要使用jQuery UI的animate功能。