Reputation: 3
When I hover over an image I want it to slide up but when I stop hovering during the animation I want the image to slide back immediately to its starting position. How do I do this in jQuery/CSS?
In my code the image will first complete the "up" animation before going down again to its starting position.
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");
});
Upvotes: 0
Views: 110
Reputation: 347
Consider using CSS3 to animate the images instead. It would perform much better on mobile devices as opposed to jQuery animation.
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;
}
Upvotes: 1