CODEWITHSUNDEEP
jqueryhoverjquery-animatemouseovermouseout
Timo Vergauwen
Timo Vergauwen

Reputation: 3

Jquery animation stop when not hovering anymore over image

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

Answers (1)

Alan Tan
Alan Tan

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

Related Questions