修改

Question

这与我的其他帖子有关，但这是另一种情况。

当我将鼠标悬停在框上时，我想显示图像2秒钟，然后在2秒后显示下一张图像。当它们悬停时，我希望它们都消失（没有fadeIn或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

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

尝试这样的事情：

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/

Answer 3

这是一个类似的问题，答案很好：Delay adding a class for 2 seconds in hover()

希望它有所帮助！：）

......注意到你也问过这个问题。

接下来悬停显示图像的Jquery时间延迟

3 个答案:

修改