Javascript 发光效果没有'；行不通

在html中：

在CSS中

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

基本上，它将具有发光效果：将颜色从红色更改为绿色，然后 从绿色变为红色，但它只会从红色变为绿色，什么都不会发生。。。
怎么了

---

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

这应该可以，但我还没有测试

var i = 0;
setInertval ( function (){
    if(i === 0){
        color = '#FF0000'; //red
        i=1;
    }
    else{
        color = '#00FF00'; //green
        i=0;
    }
    changeColor(color);
},1000);
function changeColor(color){
    $('#rec_block').animate.({'background' : color},300);
}

---

这应该行得通，不过我还没有测试过

var i = 0;
setInertval ( function (){
    if(i === 0){
        color = '#FF0000'; //red
        i=1;
    }
    else{
        color = '#00FF00'; //green
        i=0;
    }
    changeColor(color);
},1000);
function changeColor(color){
    $('#rec_block').animate.({'background' : color},300);
}

---

这是因为颜色变化太快，你看不到可怕的（对不起）效果，不是用户友好的效果，你可以使用

setTimeout

函数

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

另一种选择是：

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

---

这是因为颜色变化太快，你看不到可怕的（对不起）效果，不利于用户，你可以使用

setTimeout

功能

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

另一种选择是：

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

对于undefined的正确答案，只需添加一件事，您可以将其添加到css样式表中，以使效果更加平滑

#rec_block
{
     -webkit-transition: background 1000ms linear;
     -moz-transition: background 1000ms linear;
     -ms-transition: background 1000ms linear;
     -o-transition: background 1000ms linear;
     transition: background 1000ms linear;
}​

只有一件事要添加到undefined的正确答案中，您可以将其添加到css样式表中，以使此效果更加平滑

#rec_block
{
     -webkit-transition: background 1000ms linear;
     -moz-transition: background 1000ms linear;
     -ms-transition: background 1000ms linear;
     -o-transition: background 1000ms linear;
     transition: background 1000ms linear;
}​

---

你的间歇时间总是在瞬间从红色变为绿色。所以你永远不会注意到从绿色到红色的变化。在我的回答中，我使用了你的间隔来改变即将到来的颜色。然后触发一个改变颜色的功能。该函数将每1000毫秒调用一次，并将颜色更改为您选择的颜色。希望我的回答有帮助：）@Beneto也谢谢你。对不起，我这么愚蠢地问了这个问题……没问题，我们都必须学习：）你的间歇时间总是从红色瞬间变为绿色。所以你永远不会注意到从绿色到红色的变化。在我的回答中，我使用了你的间隔来改变即将到来的颜色。然后触发一个改变颜色的功能。该函数将每1000毫秒调用一次，并将颜色更改为您选择的颜色。希望我的回答有帮助：）@Beneto也谢谢你。对不起，我这么愚蠢地问了这个问题……没问题，我们都要学习：）我可以问一下红色和绿色分别占多长时间吗？我有点困惑。@Stallman第一个示例需要500毫秒，第二个示例需要1000毫秒，我使用了

rgb..

as

css

方法返回一个

rgb

值。这是一个非常聪明的方法！！等待参数“i”代表什么？@Stallman

css

方法接受两个参数，第一个是jQuery集合中选定元素的索引，第二个是css属性的值，在本例中为背景色。你可以随意命名，我选择了I和c。请问红色和绿色分别占多长时间？我有点困惑。@Stallman第一个示例需要500毫秒，第二个示例需要1000毫秒，我使用了

rgb..

as

css

方法返回一个

rgb

值。这是一个非常聪明的方法！！等待参数“i”代表什么？@Stallman

css

方法接受两个参数，第一个是jQuery集合中选定元素的索引，第二个是css属性的值，在本例中为背景色。你可以随意命名，我选择了I和c。