Изменение непрозрачности с помощью setTimeout

У меня есть страница с фоновым изображением, которое я хочу исчезнуть через 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 секунды. Идентификатор моего тела установлен на «neo_home_page».


javascript html jquery css settimeout
person Mike K.    schedule 01.07.2014    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Лучше использовать анимацию

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

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

person Johan    schedule 01.07.2014

arrow_upward
1
arrow_downward

Почему вы просто используете переход, имеете лучшую производительность и можете контролировать задержку

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


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

Вот пример

person Jorge    schedule 01.07.2014

arrow_upward
0
arrow_downward

Поскольку у вас есть тег jquery, вы можете просто использовать < href="http://api.jquery.com/fadein/" rel="nofollow">метод jQuery fadeIn вместо того, чтобы пытаться воссоздать колесо:

$('#neo_home_page').fadeIn(2000);
person James Donnelly    schedule 01.07.2014