Image 图像悬停效果从暗不透明背景开始

我很抱歉，如果我的标题含糊不清，我试图给它一些逻辑，我不知道

无论如何，这里有一个我正在工作的网站（正在进行中）

正如你所看到的4格区域，缩放功能非常有效，而且它是如何暗低不透明度然后淡入全色的。我喜欢这样

但是当页面加载时，它们不会以暗低不透明度开始，你必须首先滚动页面。为什么会这样

下面是悬停效果的代码

$(document).ready(function() {
    $('.viewport').mouseenter(function(e) {
        $(this).children('a').children('img').animate({ height: '230', left: '-20', top: '-20', width: '490'}, 200);
        $(this).children('a').children('span').fadeOut(400);
    }).mouseleave(function(e) {
        $(this).children('a').children('img').animate({ height: '200', left: '0', top: '0', width: '450'}, 200);
        $(this).children('a').children('span').fadeIn(400);
    });
});

非常感谢您的帮助！谢谢

只需添加

$（'.viewport'）。children（'a'）。children（'span'）。fadeIn（400）文档准备就绪后

$(document).ready(function() {
    $('.viewport').children('a').children('span').fadeIn(400);
    $('.viewport').mouseenter(function(e) {
        $(this).children('a').children('img').animate({ height: '230', left: '-20', top: '-20', width: '490'}, 200);
        $(this).children('a').children('span').fadeOut(400);
    }).mouseleave(function(e) {
        $(this).children('a').children('img').animate({ height: '200', left: '0', top: '0', width: '450'}, 200);
        $(this).children('a').children('span').fadeIn(400);
    });
});

您是否尝试删除此行
$（this）.children（'a'）.children（'span'）.fadeIn（400）？是的，这只是删除了整个黑色背景的跨度。我想我误解了，你想在页面加载时都是黑色的吗？是的，就是这样，我想所有的缩略图都是黑色的，然后在滚动时，黑色会淡出，并呈现出完整的颜色