Question

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

这是页面

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

的CSS：

$('.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');
});

这是我使用的javascript。

SELECT RatingId, Productivity, CodeQuality, AgileProcess
     , ROUND(AVG(Productivity + CodeQuality + AgileProcess) / 3, 2) AS Average
FROM DeveloperRating
GROUP BY RatingId, Productivity, CodeQuality, AgileProcess`

Answer 1

问题是图像尺寸。我建议调整它们的大小以使包装div的大小加倍（640x360），因此它们在高分辨率显示器上看起来不错。

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

.stop（）不会阻止悬停动画的构建

1 个答案: