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设置为＆＃34; neo_home_page＆＃34;。

Answer 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

Answer 2

使用动画

更好

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

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

Answer 3

正如jquery标记的那样，您只需使用jQuery's fadeIn method而不是尝试重新创建滚轮：

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

使用setTimeout更改不透明度

3 个答案: