.stop() 不能阻止悬停动画的建立答案

【问题标题】：.stop() not preventing hover animation buildup.stop() 不能阻止悬停动画的建立
【发布时间】：2015-11-26 18:48:14
【问题描述】：

我为使用 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');
});

【问题讨论】：

为什么图片这么大？每个图像的 6667x3750 都是多余的。你应该调整它们的大小，看看有多大帮助。

标签： javascript laravel animation hover masonry

【解决方案1】：

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

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

【讨论】：