每秒更改css颜色

Question

  

可能重复：
  How to loop a css background image with Jquery every few seconds?

我想知道如何实现颜色每秒变化的简单“动画”效果，如果有动画制作动画的方法，那就更好了。

我刚试过类似的事情：

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

它根本不起作用（延迟功能不起作用）..反正我需要两个：

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

使它变红 - ＆gt;等一下，变成绿色 - ＆gt;再次变红..

有可能吗？谢谢！

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