检测div是否可见，并在10秒内改变颜色

Question

因此，我正在显示一个按钮。当你点击它时，它会显示一个显示为红色的正方形：无。现在正方形的元素内嵌样式是display：block。

我试图检测到，一旦广场显示：块，提醒一条消息，并将颜色更改为黄色已经过去10秒后。

这里似乎没有工作代码，特别是如果jQuery的不运行的语句：

$("#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); 
}); 

除非有别的东西我不知道，这应该这样做。