Question

我正在玩弄小提琴试图复制堆栈溢出职业主页上的效果，当你将鼠标悬停在城市图像上时，它会扩展。

我使用jQuery mouseenter and mouseleave事件来触发动画，但是如果你在图像上快速移动鼠标，它会开始调整太大。

为什么会这样？

这是相关的jQuery代码：

$(document).ready(function() {
    var isAnimating = false;
    $('.image-box').mouseenter(function() {
        var thisImage = $(this).children().first();
        var imageWidth = parseInt($(thisImage).css('width').replace('px', ''));
        var imageHeight = parseInt($(thisImage).css('height').replace('px', ''));

        $(this).children().first().animate({
            width: imageWidth + 50,
            height: imageHeight + 40,
            marginLeft: -25,
            marginTop: -20
        }, 200);

    }).mouseleave(function() { var thisImage = $(this).children().first();
        var imageWidth = parseInt($(thisImage).css('width').replace('px', ''));
        var imageHeight = parseInt($(thisImage).css('height').replace('px', ''));

        $(this).children().first().animate({
            width: imageWidth - 50,
            height: imageHeight - 40,
            marginLeft: 0,
            marginTop: 0
        }, 200);
    });


});

Answer 1

我个人会跳过jQuery，因为这可以在CSS中完成：

.image-box {
  width: 100px;
  height: 70px;
  background-color: tomato;
  overflow: hidden;
}
.image-box-image {
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}
.image-box-image:hover {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

<div class='image-box'>
  <image class='image-box-image' src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" />
</div>

mouseenter和mouseleave表现得很奇怪

1 个答案: