javascript - .stop() 不会阻止悬停动画的构建

Question

我为客户端制作了一个页面，它使用 masonry.js 将图像加载到网格中。当您将鼠标悬停在图像上时，标题会向上滑动并且图像会稍微放大。我遇到的问题是，当您最初加载页面时，图像加载速度非常慢，并且缩放效果跳跃并累积。您可以查看一下页面，看看是否有同样的效果？如果是这样，我想知道是否是图像的大小？当我取消缩放效果时，页面会以正常速度加载。

这是页面

http://elephantegin.eu1.frbit.net/elephant-people

CSS:

.grid-item {
    height: 180px;
    width: 320px;
    overflow: hidden;
}

.grid_zoom {
    width: 105% !important;
}

.grid-item .grid_pic {
    width: 100%;
    height: auto;
    transition-delay: 1s; /* delays for 1 second */
    -webkit-transition-delay: 1s; /* for Safari & Chrome */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

这是我使用的 JavaScript。

$('.grid-item').hover(function () {
    var $item = $(this);
    var $img = $item.find('.grid_pic');
    var $callOut = $item.find('.grid_callout');

    $img.stop().toggleClass('grid_zoom');
    $callOut.stop().toggleClass('grid_slide_up');
});

Answer 1

问题是图像大小。我建议将它们的大小调整为包装 div 大小的两倍 (640x360)，以便它们在高分辨率显示器上看起来不错。

注意:在 $img 和 $callOut 元素上调用 jQuery stop() 方法没有任何效果。 stop() 只会停止由 jQuery 触发的动画，例如animate()、fadeOut() 或 slideDown()，但它不会停止 CSS 转换。但是，在鼠标移开时删除 grid_zoom 和 grid_slide_up 类将在鼠标移出时自动反转动画。