图像悬停效应从黑暗不透明的背景开始

Question

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

无论如何，这是一个正在进行的网站（正在进行中）http://art-williams.com/misc/index.html

和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);
    });
});

任何帮助将非常感谢！谢谢

Answer 1

只需在文档准备就绪后添加 $('.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);
    });
});