Need to active action on hover and back to original in 7 seconds

Question

Im developing a site that contains few animation effects.

I need to active gif(animation) on hover then once the courser is off it will be static again.
On hover I need Image1 to disappear and show image2 then once the mouse is gone, image1 will appear again after 7 seconds.

ex. Image1 is a tv with curtains, once the mouse is on it, image1 will disappear and show image2 then after 7 seconds image one will appear again.

What is the best way to pull this off?

you can achieve with `javascript` and `css3` only, but `jquery` will clarify your code and make your life easier... — Jordi Castilla, Mar 05 '15 at 09:27

JuaRoAl · Accepted Answer · 2015-03-05T09:46:18.003

3

you can try something like:

$("#myStaticImage").mouseenter(function(){

$("#myHiddenGif").fadeIn().delay(7000).fadeOut()

})

EDIT: It works better with mouseenter instead of hover

The hiddenGif should be over the static one, but with display: none

Check my example here: JS fiddle

jQuery .delay()

edited Mar 05 '15 at 09:46

answered Mar 05 '15 at 09:29

JuaRoAl

201
2
7

Thanks a lot this worked great for the second option. But for option 1, the gif appears but it does not reload. once the gif showed the animation it does not reshow the animation unless the page reloads. Is it possible to reload gif on hover? – user998787 Mar 05 '15 at 10:38
The best way to do that is with an infinite gif animation. Or check this: http://stackoverflow.com/questions/3191922/restart-an-animated-gif-from-javascript-without-reloading-the-image – JuaRoAl Mar 05 '15 at 11:14

score 0 · Answer 2 · answered Mar 05 '15 at 09:30

0

You can do this with jquery like this:

$("#your_image_id").mouseenter(function(){
    $(this).attr('src')="http://some-gif-img-source"
});

$("#your_image_id").mouseleave(function(){
    $(this).attr('src')="http://static-img-source"
});

answered Mar 05 '15 at 09:30

Aameer

1,366
1
11
30

Need to active action on hover and back to original in 7 seconds

2 Answers2