JQuery задержка при наведении Показать изображение далее

Question

Это отношение к моему другому посту, но это другой сценарий.

При наведении курсора на поле я хочу показать изображение в течение 2 секунд, а затем показать следующее изображение через эти 2 секунды. Когда они исчезнут, я хочу, чтобы они оба исчезли (без исчезновения, слайдов и т. Д.)

// html

<style type="text/css">
#date_1 img{display:none}
</style>

<div id="date_1">
<img src="2secondanimation.gif" id="magicimage_1" />
<img src="fixedimage.jpg" id="magicimage_1_fixed" />
</div>

и js:

    // jquery (UPDATED CODE)

$("#date_1").hover(function () {
    // show image for 2 seconds
    $("#magicimage_1").show(2000);
    $("#magicimage_1_fixed").show();
}, function () {
    // remove both above classes
    $("#magicimage_1").hide();
    $("#magicimage_1_fixed").hide();
});

Answer 1

$("#date_1").hover(function () {
// show image for 2 seconds
$("#magicimage_1").delay(2000).css({'display':'block'});  
// after two seconds show this and do not change
$("#magicimage_1_fixed").delay(2000).css({'display':'block'});  
}, function () {
    // remove both above classes
    $("#magicimage_1").css({'display':'none'});  
     $("#magicimage_1_fixed").style.display="none";
});

Answer 2

Вот симуляционный вопрос с хорошим ответом: Задержка добавления класса на 2 секунды в hover ()

Надеюсь, это поможет! :)

... заметил, что это вы задали и этот вопрос.

Answer 3

Попробуйте что-то вроде этого:

http://jsfiddle.net/gYmvN/

$("#date_1").hover(function () {

  $("#img1").show();
  $("#img2").delay(2000).show(true);

}, function(){
    $("#img1").hide();
    $("#img2").hide();

});

Я считаю, что это то, что вы просите.

---

РЕДАКТИРОВАТЬ

Обновлено с новым кодом для перезапуска GIF

http://jsfiddle.net/gYmvN/4/