Эффект исчезания setTimeout

Не прошло и суток, как я решил поделиться с вами еще одним скриптом, а точнее очень полезной функцией setTimeout, которая просто идеально подошла для выполнения поставленной задачи. Скрипт на самом деле оказался очень простой, мне нужно было выполнить эффект исчезания окна с текстом через определенный промежуток времени после захода на сайт. Ну к примеру, время было поставлено на 5 секунд, после чего мое окно должно было просто исчезнуть и меня перенаправляло бы по ссылке на другой ресурс или страницу.

Честно говоря разбирать тут особо нечего, как только стоит отметить, что сама функция setTimeout, имеет аналогичного, скажем так, партнера по задержке запуска, а именно второй функцией является setInterval. Разница между ними очень проста, setTimeout - делает запуск задержки один раз, а setInterval производит этот циклично, с небольшой периодичностью во времени. Ну, а теперь давайте перейдем к изучению кода данного материала.

Сразу подключаем стандартную библиотеку jQuery.min.js и стили demo.css.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/demo.css">

Теперь создаем HTML код для вывода нашего с вами окна, которое должно будет потом исчезнуть через 5 секунд.

Создаем блочный элемент div и придаем ему идентификатор window. В сам div помещаем нужную нам информацию.

<div id="window">
	<img src="img/rh.png">
	<h1>Добро пожаловать!</h1>
	<h2>Мы Вас очень рады видеть на сайте</h2>
	<a href="http://roothelp.ru">RootHelp.ru</a>
</div>

Создаем функцию setTimeout, которой прописываем идентификатор window и устанавливаем задержку в 5000 миллисекунд, после чего с помощью функцию fateOut, задаем CSS свойство display:none, а точнее делаем весь блок невидимым.

<script type="text/javascript">
	setTimeout(function(){$('#window').fadeOut()},5000);
</script>

В свойствах CSS рассказывать особо нечего, так они служат только для оформления данного урока.

#window {
	width: 600px;
	height: 200px;
	border: 3px solid #FF4E00;
	border-radius: 10px;
	background: #b2ffff;
	border-radius: 10px;
	padding: 20px;
}

#window img{
	float: left;
	width: 200px;
}

#window h1{
	text-align: center;
	text-decoration:underline;
}

#window h2{
	text-align: center;
	margin: 30px 0;
}

#window a{
	text-decoration: none;
	color: #FF4E00;
	margin-left: 100px;
	font-size: 40px;
}

Вот в принципе и все. Данный материал был выпущен в основном на конкретно сложившуюся ситуацию у новичков, которые искали решение на подобный вопрос, поэтому, надеюсь, более опытные программисты не статут смеяться над выходом данного урока) Не забывайте предлагать свои актуальные темы, которые Вам интересны, но Вы не знаете как их решить! Спасибо всем за внимание, удачных выходных, оставайтесь с нами! Всем пока)