1

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

基本上，它会产生发光效果：将颜色从红色变为绿色，从绿色变为红色，但它只会将红色变为绿色，并且没有任何反应......
这有什么问题？

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

4

3 回答 3

3

那是因为颜色变化发生得太快，你看不到可怕的（抱歉），不友好的效果，你可以使用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/

于 2012-12-16T11:52:24.160 回答
1

只需将一件事添加到未定义的正确答案中，您可以将其添加到您的 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;
}​
于 2012-12-16T12:14:21.423 回答
0

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

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);
}
于 2012-12-16T11:51:18.877 回答