divが表示されているかどうかを検出し、10秒後に色を変更します。

Question

ボタンを表示しています。クリックすると、表示：なしの赤い四角形が表示されます。四角形の要素インラインスタイルはdisplay：blockになりました。

一度正方形にdisplay：ブロックがあり、メッセージが表示され、黄色に変わることを検出しようとしています。は、10秒後にになりました。ここで

が動作するようには思えないコード、特にjQueryが実行されないif文です：

$("#shower").click(function() {//click to show red square 
$('#DivBlock').show(); 
}); 

if ($('#DivBlock').css("display") != "none") {//statement does not work 
alert ("Visible for 10 seconds, then turn yellow!"); //need to alert this immediately 
$('#DivBlock').addClass('yellow'); //need to do this after 10 seconds 
} 

この問題を解決するためにどのように任意のアイデア？ http://jsfiddle.net/LnPpe/2/

Answer 1

setTimeout(function() { 
    $('#DivBlock').addClass('yellow'); 
}, 10e3); 

jsFiddle。

Answer 2

最初の問題は、if文を明示的に呼び出さないことです。私は、このコードが$(document).ready()ブロックにあると推測しています。この場合、ドキュメントが最初に読み込まれたときにのみ実行されます。それは書かれたように連続して実行されません。

ボタンをクリックして赤い四角形の表示を開始するので、発生したときに「検出」するリスナー機能は必要ありません。あなたはボタンがクリックされたときにそれがいつ起こるかを知っています。したがって、タイムアウトと色を変更するコードをすぐに配置してください。

$("#shower").click(function() {//click to show red square 
    $('#DivBlock').show(); 
    setTimeout(function() { 
    $('#DivBlock').addClass('yellow'); 
    }, 10000); 
}); 

私にはわからないことがない限り、これを行う必要があります。