使用Timer JQuery更改背景颜色CSS

时间:2011-08-08 22:55:02

标签: jquery css colors jquery-animate

我希望有人可以向我展示高效的JQuery,以便在div类中的4种背景颜色之间制作动画。

我希望这些事件能够按时间触发,而不是点击或悬停。我看过悬停和切换的帖子,但是作为一个不太熟练使用JQuery的人,我觉得在这里和那里复制和粘贴部件感觉不太舒服。

谢谢

2 个答案:

答案 0 :(得分:7)

我不知道你是不是意味着动画就像褪色到下一个,但这是一个简单的快速示例,每2秒更改一次颜色。第一个例子不需要jQuery。

<强> Live Demo

function changeColor(curNumber){
    curNumber++;

    if(curNumber > 4){
        curNumber = 1;
    }
    document.body.setAttribute('class', 'color' + curNumber);
    setTimeout(function(){changeColor(curNumber)}, 2000);  
}

changeColor(0);

更新动画颜色

如果您希望在类或背景颜色之间淡入淡出,则第二个示例需要Jquery UI。

<强> Demo 2

function changeColor(element, curNumber){
    curNumber++;

    if(curNumber > 4){
        curNumber = 1;
    }

    element.addClass('color' + curNumber, 1000);

    // So previous classes get removed.
    element.attr('class', 'color' + curNumber);

    setTimeout(function(){changeColor(element, curNumber)}, 2000);  
}

changeColor($('#testElement'), 0);

答案 1 :(得分:1)

更新

我确信有更好的方法可以做到这一点,但只是为了向您展示一种简单的方法来实现这一目标......

http://jsfiddle.net/UnsungHero97/QLPbW/5/


您想使用window.setInterval()功能......

window.setInterval(rotateBG, 1000); // 1000 = 1 second

function rotateBG() {
    // logic to rotate background
}

我希望这会有所帮助。