Search code examples
jquerytimehiddenvisible

Detect if div becomes visible, and change color in 10 seconds

So I'm displaying a button. When you click it, it shows a red square that had display:none. The element inline-style for the square now is display:block.

I'm trying to detect that once the square has display:block, alert a message, and change the color to yellow after 10 seconds have passed.

Here is the code that doesn't seem to work, particularly the jQuery if statement that doesn't run:

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

Any idea how to fix this? http://jsfiddle.net/LnPpe/2/

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

    jsFiddle.