Jquery 不再悬停在图像上时动画停止

Question

当我将鼠标悬停在图像上时，我希望它向上滑动，但是当我在动画期间停止悬停时，我希望图像立即滑回其起始位置。我如何在 jQuery/CSS 中执行此操作？

在我的代码中，图像将首先完成 "up" 动画，然后再次下降到其起始位置。

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

考虑使用 CSS3 来为图像制作动画。与 jQuery 动画相比，它在移动设备上的表现要好得多。

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

Jquery 不再悬停在图像上时动画停止

Jquery animation stop when not hovering anymore over image

jquery

mouseover

hover

mouseout

jquery-animate