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

【问题标题】：Image hover effect starting with a dark opaque background从深色不透明背景开始的图像悬停效果
【发布时间】：2012-10-31 08:46:54
【问题描述】：

对不起，如果我的标题含糊不清，我试图给它一些我不知道的逻辑。

无论如何，这是一个我正在开发的网站（正在进行中） 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);
    });
});

非常感谢任何帮助！谢谢

【问题讨论】：

您是否尝试删除此行$(this).children('a').children('span').fadeIn(400); ？
是的，这只是删除了作为深色背景的跨度。
我想我误会了，你想在页面加载时都变黑吗？
是的，就是这样，我希望所有缩略图都变暗，然后在翻转时变暗并变成全彩

标签： image hover effect rollover

【解决方案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);
    });
});

【讨论】：