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/

Answer 2

添加到 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;
}

Answer 3

这应该有用，我还没有测试过。

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

发光效果不起作用

3 个答案: