Wie ein gif animieren auf schweben machen, nachdem unhovered

Question

wieder normal:

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

wo die .original sind Platzhalter und die .hovered sind Gifs, die ich will auf animieren Bewegen Sie den Mauszeiger und kehren Sie dann in den Normalzustand zurück, nachdem die Maus gegangen ist. Mein Versuch ist:

$('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(); 
    });*/ 
}); 

aber der Grund für den auskommentierten Abschnitt ist, weil es nicht funktioniert. Es verursacht alle Arten von Verrücktheit. Was ist das richtige Muster, das ich hier verwenden sollte?

Answer 1

Die grundlegende HTML-Struktur ist korrekt. CSS Nur wenn, wie diese codepen http://codepen.io/ryanpcmcquen/pen/gGqdI tut

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

.hover-icon img { 
    position: absolute; 
} 

.hover-icon img.original:hover { 
    opacity: 0; 
}