的發光效果不起作用

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

基本上，這將有發光效果：從紅到綠的顏色變化和綠到紅，但它只會變成紅色變成綠色，什麼也沒有發生......
那是什麼毛病？

更新：請解釋爲什麼上面的代碼無法正常工作......謝謝。

來源

2012-12-16 Stallman

您的間隔總是立即從紅色變爲綠色。所以你永遠不會注意到從綠色變爲紅色。在我的回答中，我用你的間隔來改變即將到來的顏色。然後觸發一個可以改變顏色的函數。該功能將每1000毫秒調用一次，並將顏色更改爲您選擇的即將到來的顏色。希望我的回答有助於:)。 – sourRaspberri

@Beneto也謝謝你。對不起，我很愚蠢地問這個問題... – Stallman

沒問題，我們都得學習:) – sourRaspberri

這是因爲顏色變化發生得太快，你無法看到可怕的（對不起），而不是用戶友好的效果，你可以使用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-16 11:52:24 undefined

請問紅色和綠色分別佔多長時間？我有點困惑。 – Stallman

@Stallman第一個例子需要500毫秒，第二個例子需要1000毫秒，因爲'css'方法返回'rgb'的值，所以我使用了'rgb..'。 – undefined

這是非常聰明的方法！ – Stallman

這應該工作，我還沒有測試。

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-16 11:51:18 sourRaspberri

一件事添加到未定義的正確的答案，你可以添加到您的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-16 12:14:21

的發光效果不起作用

回答

相關問題