javascript - 褪色图像/流畅的网站使用

Question

只是一个简短的问题，就像询问使用 HTML 时的可能性以及询问特定代码一样。

我见过带有 slider 的网站，当您进入网站时，可点击的图像会淡入。我尝试并搜索了一个答案，但不确定要搜索什么，所以我希望你明白我的意思。

我正在为我的网站创建一个“输入”页面，我想在其中包含 3 个可点击的图像，文本为“欢迎 blabla 在顶部，下面是 Logo 。在 Logo 下方我想要我的 3 个图像，而不是只是让图像砸在脸上 我想在进入网站时平滑过渡，让它们淡入进入页面。

我希望你明白这个想法，否则请问，然后我会尝试解释得更好一些。

谢谢你:)

淡入淡出代码:

CSS:

img{
    opacity:0;
    font-size:2em;
    font-weight:bolder;
    text-align:center;
    -webkit-transition: all 2s ease;
}
.animate{
    color:red;
    opacity:1;
    -webkit-transform:scale(1.2);
}

HTML:

<img src="welcome.png" />

JavaScript:

 <script>
$(document).ready(function(){
    $('img').addClass('animate');
});
</script>

Answer 1

使用

$(document).ready(function(){
    //code here
});

让某些东西在页面加载后立即运行。例如:

$(document).ready(function(){
    $('#image-one').fadeIn();
});