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

Question

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

这是页面

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 元素上调用 jQuerys stop() 方法没有任何效果。 stop() 只会停止由 jQuery 触发的动画，例如animate()、fadeOut() 或 slideDown()，但它不会停止 CSS-转换。但是，在鼠标移出时删除 grid_zoom 和 grid_slide_up 类将在鼠标移出时自动反转动画。

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

.stop() not preventing hover animation buildup

javascript

animation

hover

laravel

masonry