Определите, становится ли div видимым, и измените цвет за 10 секунд

Question

Итак, я показываю кнопку. Когда вы щелкаете по нему, он показывает красный квадрат с отображением: нет. Элемент inline-стиля для квадрата теперь является display: block.

Я пытаюсь обнаружить, что после появления квадрата: заблокировать, предупредить сообщение и изменить цвет на желтый через 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);
});

Если нет чего-то еще, чего я не знаю, это должно сделать это.