Question

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

在我的代码中，图片将首先完成＆＃34; up＆＃34;在再次下降到起始位置之前动画。

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

不停留在图像

1 个答案: