jquery - 使用 Timer JQuery 更改背景颜色 CSS

Question

我希望有人能向我展示高效的 JQuery 以在 div 类中的 4 种背景颜色之间设置动画。

我希望这些事件由时间触发，而不是点击或悬停。我看过关于悬停和切换的帖子，但作为一个不太精通 JQuery 的人，我觉得到处复制和粘贴部分不太舒服。

谢谢

Answer 1

我不知道你的意思是不是像淡入淡出一样动画，但这是一个每 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);