JQuery-Animation stoppen, wenn Sie nicht mehr über Bild schweben

Question

Wenn ich mit dem Mauszeiger über ein Bild fahre, möchte ich, dass es nach oben fährt, aber wenn ich während der Animation aufhöre, möchte ich das Bild sofort an seine Startposition zurückschieben. Wie mache ich das in jQuery/CSS?

In meinem Code wird das Bild zuerst die "up" -Animation vervollständigen, bevor es wieder in seine Ausgangsposition zurückgeht.

HTML:

<img id="card" alt="card-img" src="images/cardAction.png"> 

jQuery:

$("#card").on("mouseover", "img.cardInHand", function() { 
     $(this).animate({ 
      bottom: '0px' 
     }, "slow"); 
}); 

$("#card").on("mouseout", "img.cardInHand", function() { 
    $(this).animate({ 
     bottom: '-65px' 
    }, "slow"); 
}); 

Answer 1

Betrachten CSS3 unter Verwendung der Bilder statt zu animieren. Im Gegensatz zu jQuery-Animationen würde es auf Mobilgeräten viel besser funktionieren.

img{ 
    margin-top:0; 
    transition: margin 0.5s ease-in-out; 
    -moz-transition: margin 0.5s ease-in-out; 
    -o-transition: margin 0.5s ease-in-out; 
    -webkit-transition: margin 0.5s ease-in-out; 
} 
img:hover{ 
    margin-top:-50px; 
}