jquery懸停的時間延遲顯示圖像下一個

Question

這是關係到我的其他職位，但它是一個不同的場景。

當我將鼠標懸停在框上時，我想要顯示圖像2秒鐘，然後在2秒後顯示下一張圖像。當他們徘徊的時候，我希望他們都消失（沒有淡入或了slideDown等）

// 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

嘗試是這樣的：

http://jsfiddle.net/gYmvN/

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

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

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

}); 

I相信這是你所要求的。

---

編輯

與新代碼更新來重新啓動GIF

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

Answer 2

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

這是一個偉大的回答有simular問題：Delay adding a class for 2 seconds in hover()

希望它能幫助！ :)

...注意到它也是你問這個問題。