Jquery time delay on hover show image next

Question

This is relation to my other post but it is a different scenario.

When I hover over the box, I want to show an image for 2 seconds, and then show the next image after those 2 seconds. When they hover off, I want them both to disappear (no fadeIn or slideDown etc)

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

and 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();
});

You have tagged your question with jQuery but you don't really seem to take much advantage of it in your code. Things like document.getElementById have their equivalent in jQuery. — Darin Dimitrov, Dec 12 '11 at 09:00
because I dont know the command to show hide and unhide I only know slideDown and fadeIn for showing items. — TheBlackBenzKid, Dec 12 '11 at 09:01
@TheBlackBenzKid `$('#myId').show()` and `$('#anotherId').hide()` — Petah, Dec 12 '11 at 09:03
plus using .show() I want to show a GIF image which lasts for 2 seconds but it automatically goes to the last frame. — TheBlackBenzKid, Dec 12 '11 at 09:07
@TheBlackBenzKid 2000 doesn't delay it, it takes that long to show it. You need to add a delay. You may need to use fadeTo in this case as well. — Matt, Dec 12 '11 at 09:10

score 2 · Answer 1 · answered Dec 12 '11 at 09:09

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

Matt · Accepted Answer · 2011-12-12T12:26:16.937

1

Try something like this:

http://jsfiddle.net/gYmvN/

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

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

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

});

I believe this is what you are asking for.

EDIT

Updated with new code to restart gif

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

edited Dec 12 '11 at 12:26

answered Dec 12 '11 at 09:18

Matt

7,049
7
50
77

Would there be a way to play an animated GIF on hover and then when MouseOut hide the class BUT when they go back to animated GIF it plays the same GIF again from frame 1?? GIFS are bad at cache – TheBlackBenzKid Dec 12 '11 at 12:08
1

@TheBlackBenzKid yes, you can precache your gif images and then reload the src in your image. Because it's cached, it will be fast enough to reload to look like it just started at frame 1. take a look at http://stackoverflow.com/questions/3191922/restart-an-animated-gif-from-javascript-without-reloading-the-image , you probably want to use $("#magicimage_1").attr(...) – Matt Dec 12 '11 at 12:15
I actually posted another question to help users better. http://stackoverflow.com/questions/8474199/reload-animated-gif-cache-each-jquery-hover – TheBlackBenzKid Dec 12 '11 at 12:22
@TheBlackBenzKid i updated it here, saw your comment so i posted it over at the new post too. – Matt Dec 12 '11 at 12:28

score 1 · Answer 3 · edited May 23 '17 at 12:11

1

Here is a simular question with a great answer: Delay adding a class for 2 seconds in hover()

Hope it helps! :)

...noticed that it was you who asked that question as well.

edited May 23 '17 at 12:11

Community

1
1

answered Dec 12 '11 at 09:43

Stefan

5,644
4
24
31

slightly different to the other scenario. @Matt has simplified the query. Repped nonetheless – TheBlackBenzKid Dec 12 '11 at 12:23

Jquery time delay on hover show image next

3 Answers3

EDIT