1

So I have a bunch of elements like:

<div class="hover-icon one">
    <img class="original" src="sswe-images/Circle_Customer Notifications.png"/>
    <img class="hovered one" src="sswe-images/Customer-Notifications.gif" />
</div>
<div class="hover-icon two">
    <img class="original" src="sswe-images/Circle_Field Service Tools.png"  />
    <img class="hovered" src="sswe-images/Field-Service-Tools.gif" />
</div>
<div class="hover-icon three">
    <img class="original" src="sswe-images/Circle_Remote Connectivity.png"  />
    <img class="hovered" src="sswe-images/Remote-Connectivity.gif" />
</div>

where the .original are placeholders and the .hovered are gifs that I want to animate on hover, then go back to their normal state after the mouse leaves. My attempt is:

$('div.hover-icon').hover(function(){
    var orig = $(this).find('.original');
    orig.hide();
    var hov = $(this).find('.hovered');
    hov.attr('src', hov.attr('src') + "?x=" + Math.random());
    setTimeout(function(){ hov.show(); }, 100);        
    /* $(this).mouseleave(function(){
        hov.hide();
        orig.show();
    });*/
});

but the reason for the commented out section is because it's not working. It's causing all kinds of craziness. What is the proper pattern I should be using here?

angelcool.net
  • 2,505
  • 1
  • 24
  • 26
Subpar Web Dev
  • 3,210
  • 7
  • 21
  • 35
  • There are probably more concise ways to do this if you want to support CSS3. A Google search of "css gif animation start stop" turns up lots of possibilities. – lurker Apr 21 '16 at 20:54
  • The simplest solution is to have a simple image and replace it with GIF image on hover. – NLV Apr 21 '16 at 20:54
  • try this http://stackoverflow.com/questions/7473117/animating-a-gif-on-hover – Chris Apr 21 '16 at 21:00

1 Answers1

2

The basic HTML structure is correct. Use CSS only though , like this codepen http://codepen.io/ryanpcmcquen/pen/gGqdI does 

.hover-icon {
  position: relative;
  margin: 0 auto;
}

.hover-icon img {
  position: absolute;  
}

.hover-icon img.original:hover {
  opacity: 0;
}
lipp
  • 5,586
  • 1
  • 21
  • 32