image - 从深色不透明背景开始的图像悬停效果

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