每秒更改一次 css 颜色

Question

可能的重复项：
如何每隔几秒钟用Jquery循环一个css背景图片？

我想知道如何实现每秒变化颜色的简单"动画"效果，如果有一种方法可以使动画动画化，它可以更好。

我刚刚尝试了类似的东西：

$('.box').delay(1000).css("background","red");

而且它根本不起作用(延迟功能不起作用(.. 无论如何，我需要其中两个：

$('.box').delay(1000).css("background","red");
$('.box').delay(1000).css("background","green");

所以它变成红色 ->等待一秒钟，变成绿色 ->再次变成红色。

可能吗？谢谢！

Answer 1

$(document).ready(function() {
    setInterval(function() {
        $('body').animate( { backgroundColor: 'red' }, 300)
            .animate( { backgroundColor: 'green' }, 300);
    }, 1000);
});

http://jsfiddle.net/theSifter/yR6jc/

Answer 2

setInterval(function() {
    var box = $('.box');
    if (box.css('background-color') == 'red') {
        box.css({'background-color':'green'});
    }
    else {
        box.css({'background-color':'red'});
    }
}, 1000);

Answer 3

<h1 id="ho">Ho ho ho!</h1>
<h2 id="mc">Merry Christmas!</h2>
<script>
    var flag = false;
    setInterval(function() {
        flag = !flag;
        $("#ho").css("background", flag ? "red" : "green");
        $("#mc").css("background", flag ? "green" : "red");
    }, 1000);
</script>

Answer 4

我认为你必须使用javascript setInterval方法：

看这里：http://www.w3schools.com/jsref/met_win_setinterval.asp

所以：

setInterval(function() {
// Code to execute every second
}, 1000);