使用 setTimeout 更改不透明度答案

【问题标题】：Changing Opacity Using setTimeout使用 setTimeout 更改不透明度
【发布时间】：2014-07-01 23:57:10
【问题描述】：

我有一个带有图像背景的页面，我想在 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 秒后淡入。我的 body ID 设置为“neo_home_page”。

【问题讨论】：

标签： javascript jquery html css settimeout

【解决方案1】：

为什么你只使用一个过渡，有更好的性能，你可以控制延迟

#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

【讨论】：

【解决方案2】：

最好用动画

$(x).animate({opacity:1.0},2000);

http://api.jquery.com/animate/

【讨论】：

【解决方案3】：

因为你已经标记了jquery，你可以简单地使用jQuery's fadeIn method而不是尝试重新创建轮子：

$('#neo_home_page').fadeIn(2000);

【讨论】：