图像悬停效果开始于黑暗不透明背景

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