javascript - 发光效果不起作用

Question

在 html 中: <div id="rec_block"></div>
在 CSS 中

#rec_block{
position: absolute;
top: 340px;
left: 615px;
width: 100px;
height: 100px;
background-color: red;
visibility: hidden; 
}

var rec_block= $('#rec_block');
rec_block.css('visibility',"visible");
setInterval
(
    function()
    {           
        rec_block.css('background-color',"red");
        rec_block.css('background-color',"green");          
    }           
,1000
);

基本上，它会产生发光效果:将颜色从红色变为绿色，然后绿色到红色，但它只会将红色变为绿色而没有任何反应......
这有什么问题吗？

更新:请解释为什么上面的代码不能工作...谢谢。

Answer 1

那是因为颜色变化太快，你看不到可怕的(抱歉)，不友好的效果，你可以使用setTimeout函数。

setInterval(function() {
    rec_block.css('background-color', "red");
    setTimeout(function(){
        rec_block.css('background-color', "green");
    }, 500)
}, 1000);

http://jsfiddle.net/S8zNX/

另一种方法是:

setInterval(function() {
    rec_block.css('background-color', function(i, c){
        return c === 'rgb(255, 0, 0)' ? 'green' : 'red'
    });
}, 1000);

http://jsfiddle.net/9RXw9/