javascript - 使用 setTimeout 更改不透明度

Question

我有一个带有图像背景的页面，我想在 2 秒后淡入，但似乎无法让它工作。

这是我的 HTML

<div id="neo_wrapper">
  <div id="neo_container">
    <div id="neo_homepage_image"></div>
   </div>
</div>

我的 CSS

#neo_home_page {
width: 960px;
height: 1000px;
margin: 0 auto;
opacity: 0;
}

#neo_wrapper {  
width: 960px;
height: 1000px;
margin: 0 auto;
}

#neo_container {    
width: 960px;
height: 100%;
margin: 0 auto;
 }

和 JavaScript

<script>
$(document).ready(function () {;
$("#neo_home_page").backstretch("_ui/bg_img.jpg");
});
</script>
<script>

var x = document.getElementById('neo_home_page');

setTimeout(function(){x.opacity = "1.0"}, 2000);

</script>

我将要更改的元素的不透明度初始设置为 0，并希望它在 2 秒后淡入。我的正文 ID 设置为“neo_home_page”。

Answer 1

为什么只用transition，有更好的性能，可以控制延迟

#blah{
    transition: opacity 2s linear;
    width:40px;
    height:40px;
    opacity: 0;
    background-color:red;
}


$(document).ready(function(){
    document.getElementById('blah').style.opacity = 1;
});

Here's an example