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

未定義の正解に追加することは 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 に答える