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

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

1 个答案: