jquery - mouseenter 和 mouseleave 表现奇怪

Question

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

我使用 jQuery mouseenter 和 mouseleave 事件来触发动画，但是如果您在图像上快速移动鼠标，它就会开始过度调整大小。

这是一个 fiddle :http://jsfiddle.net/ndeb6hnt/

为什么会发生这种情况？

这是相关的 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>