.hide {
	display: none;
	}
.show {
	padding: 5px;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: #ccc 0 0 10px;
	border-radius: 5px;
	width: 320px;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	(function($) {
		$.fn.dropDownBlock = function(block, options) {
			var defaults = {
				speed: 'fast',
				top: $(this).height(),
				left: 0
			},
			opts 	= $.extend(defaults, options),
			toggler = $(this),
			block 	= $(block);
			toggler.css({'outline': 'none'})

			toggler.click(function(e) {
				e.preventDefault();
				$(block).css({
					'position' 	: 'absolute',
					'top' 		: (toggler.offset().top + opts['top']) + 'px',
					'left' 		: (toggler.offset().left + opts['left']) + 'px'
				});
				if($(block).is(':visible')) $(block).fadeOut(opts['speed']);
				else $(block).fadeIn(opts['speed']);
				this.focus();
			});
			toggler.blur(function() {
				$(block).fadeOut(opts['speed']);
			});
		};
	})(jQuery);
	// на каждую ссылку своя строка с link и block
	$('#link').dropDownBlock($('#block'));
</script>

JS вставляем перед закрывающим тэгом </body>
4. HTML

<!-- Ссылка -->
<a href="#" id="link">активное ядро галактики</a> 

<!-- Блок -->
<div class="hide show" id="block">
<b>Активные ядра галактик</b> — ядра галактик, наблюдаемые процессы в которых нельзя объяснить свойствами находящихся в них звезд и газово-пылевых комплексов.
</div>

.typed-char {
	width: 80px;
	height: 80px;
	text-align: center;
	padding-top: 5px;
	margin: 2px;
	border: 1px solid #c9c041;
	background: #eed200;
	font-weight: bold;
	text-shadow: #FFF 0px 1px 1px;
	font-size: 60px;
	font-family: Verdana;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-box-shadow: 0 1px 3px #999;
	-webkit-box-shadow: 0 1px 3px #999;
	}
input {
	width: 450px;
	height: 90px;
	font-size: 70px;
	border-radius: 3px;
	border: 1px solid #eed200;
	outline:none;
	padding: 0 5px;
	box-shadow: 0 1px 3px #999;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

3. Подключение Fire.Pass.Chars.js

<script type="text/javascript" src="fire.pass.chars.js"></script>

4. JavaScript

<script type="text/javascript">
	$(document).ready(function() {
		$('#pass').awesomePassword({
			left: -74
		});
	});
</script>

5. HTML

<form name="first-form" method="post">
	<input type="password" id="pass" name="pass" />
</form>

.zoomy	{
	position: absolute;
	display: none;
	background-repeat: no-repeat;
	border: 0;
	cursor: url(blank.gif), move;
	line-height: 100px;
	text-align: center;
	background-image: url(loading.gif);
	background-position: center;
	background-color: #fff;
	z-index: 1000;
	box-shadow: 3px 3px 10px #000;
	-webkit-box-shadow: 3px 3px 10px #000;
	-moz-box-shadow: 3px 3px 10px #000;
	}
.zoomy span {
	display: block;
	margin: 10px auto;
	background: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.50, rgba(255, 255, 255, 0)), to( rgba(255, 255, 255, .5)));
	background: -moz-linear-gradient(bottom center, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 100%);
	}
.zoomy img {
	opacity: 0;
	filter:alpha(opacity=0);
	}
.zoomy a {
	color: #333;
	text-decoration: none;
	}
.broke a {
	display: block;
	height: 100%;
	width: 100%;
	}
#brokeZoomy {
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	top: 0px;
	left: 0px;
	background: #fff url(broke.gif) center no-repeat;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

3. Подключение Zoomy

<script type="text/javascript" src="jquery.zoomy0.5.js"></script>

4. JavaScript

<script type="text/javascript">
	$(function(){
		$('.zoom').zoomy({
			zoomSize: 150 // Размер "увеличительного стекла" в пикселях
		});
	});
</script>

5. HTML

<a href="5000_big.jpg" class="zoom"> 
	<img src="5000_small.jpg">  
</a>

.wrapper {
	height: 30px;
	line-height: 30px;
	width: 200px;
	float: left;
	clear: both;
	position: relative;
	margin: 10px;
	font-family: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	}
.itemMain {
	color: #fff;
	z-index: 10;
	border: 1px solid #333;
	background-color: #777;
	background-repeat: no-repeat;
	background-position: 95% 50%;
	cursor: pointer;
	text-align: left;
	text-indent: 10px;
	width: 200px;
	position: absolute;
	top: 0px;
	left: 0px;
	text-shadow: 1px 1px 1px #000;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	}
.down {
	background-image: url(down.png);
	}
.up{
	background-image: url(up.png);
	}
.wrapper ul {
	list-style: none;
	padding: 2px 0px 0px 0px;
	width: 100%;
	position: absolute;
	bottom: 30px;
	left: 0px;
	}
.wrapper ul li a {
	text-decoration: none;
	cursor: pointer;
	display: block;
	padding: 3px 0px;
	line-height: 20px;
	text-indent: 10px;
	letter-spacing: 1px;
	color: #ddd;
	background-color: #525252;
	border: 1px solid #333;
	margin: 3px 0px;
	text-shadow: 1px 1px 1px #000;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background:
		-webkit-gradient (
		linear,
		left bottom,
		left top,
		color-stop(0.12, rgb(51,51,51)),
		color-stop(0.56, rgb(82,82,82))
		);
	background:
		-moz-linear-gradient (
		center bottom,
		rgb(51,51,51) 12%,
		rgb(82,82,82) 56%
		);
	-moz-box-shadow: 0px 0px 2px #333 inset;
	-webkit-box-shadow: 0px 0px 2px #333 inset;
	box-shadow: 0px 0px 2px #333 inset;
	}
.wrapper ul li a:hover {
	background: #333;
	color: #fff;
	-moz-box-shadow: 0px 0px 3px #ddd inset;
	-webkit-box-shadow: 0px 0px 3px #ddd inset;
	box-shadow: 0px 0px 3px #ddd inset;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	$(function() {
		$('#ui_element').find('li').hide();
		$('#ui_element').find('.itemMain').toggle(
			function(){
				var $this 	= $(this);
				$this.addClass('down').removeClass('up');
				var $menu	= $this.prev();
				var t = 50;
				$($menu.find('li').get().reverse()).each(function(){
					var $li = $(this);
					var showmenu = function(){$li.show();};
					setTimeout(showmenu,t+=50);
				});
			},
			function(){
				var $this 	= $(this);
				$this.addClass('up').removeClass('down');
				var $menu	= $this.prev();
				var t = 50;
				$($menu.find('li').get().reverse()).each(function(){
					var $li = $(this);
					var hidemenu = function(){$li.hide();};
					setTimeout(hidemenu,t+=50);
				});
			}
		);
	});
</script>

4. HTML

<div id="ui_element" class="wrapper">
	<ul>
		<li><a href="#">Пункт №1</a></li>
		<li><a href="#">Пункт №2</a></li>
		<li><a href="#">Пункт №3</a></li>
		<li><a href="#">Пункт №4</a></li>
		<li><a href="#">Пункт №5</a></li>
		<li><a href="#">Пункт №6</a></li>
		<li><a href="#">Пункт №7</a></li>
		<li><a href="#">Пункт №8</a></li>
		<li><a href="#">Пункт №9</a></li>
		<li><a href="#">Пункт №0</a></li>
	</ul>
	<div class="itemMain up">Меню</div>
</div>

5. Изображения

#slidebox{
	width: 728px;
	height: 90px;
	margin-left: 50%;
	left: -369px;
	background-color: #fff;
	border-top: 1px solid #E28409;
	border-right: 1px solid #E28409;
	border-left: 1px solid #E28409;
	position: fixed;
	bottom: -105px;
	box-shadow: 0 0 10px #aaa;
	-moz-box-shadow: 0 0 10px #aaa;
	-webkit-box-shadow: 0 0 10px #aaa;
	}
a.close{
	background: transparent url(close.gif) no-repeat top left;
	width: 13px;
	height: 13px;
	position: absolute;
	cursor: pointer;
	top: 10px;
	right: 10px;
	z-index: 10;
	}
a.close:hover{
	background-position: 0px -13px;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	$(function() {
		$(window).scroll(function(){
			var distanceTop = $('#show').offset().top - $(window).height();
			if  ($(window).scrollTop() > distanceTop)
				$('#slidebox').animate({'bottom':'0px'},300);
			else
				$('#slidebox').stop(true).animate({'bottom':'-105px'},200);
		});
		$('#slidebox .close').bind('click',function(){
			$(this).parent().remove();
		});
	});
</script>

4. HTML

<div id="slidebox">
	<a class="close"></a>
</div>

5. Вызывающий элемент

<div id="show"></div>

6. Изображение

ul.ldd_menu {
	margin: 0px;
	padding: 0;
	display: block;
	height: 50px;
	background-color: #0051A1;
	list-style: none;
	font-family: "Trebuchet MS", sans-serif;
	border-top: 1px solid #3474C6;
	border-bottom: 1px solid #3474C6;
	border-left: 10px solid #0051A1;
	-moz-box-shadow: 0px 3px 4px #007BC2;
	-webkit-box-shadow: 0px 3px 4px #007BC2;
	-box-shadow: 0px 3px 4px #007BC2;
	}
ul.ldd_menu a {
	text-decoration: none;
	}
ul.ldd_menu > li {
	float:left;
	position:relative;
	}
ul.ldd_menu > li > span {
	float: left;
	color: #fff;
	background-color: #0051A1;
	height: 50px;
	line-height: 50px;
	cursor: default;
	padding: 0px 20px;
	text-shadow: 0px 0px 1px #fff;
	border-right: 1px solid #3474C6;
	border-left: 1px solid #0049A1;
	}
ul.ldd_menu .ldd_submenu {
	position: absolute;
	top: 50px;
	width: 480px;
	display: none;
	opacity: 0.9;
	left: 0px;
	font-size: 10px;
	background: #0051A1;
	border-top: 1px solid #3474C6;
	-moz-box-shadow: 0px 3px 4px #0051A1 inset;
	-webkit-box-shadow: 0px 3px 4px #0051A1 inset;
	-box-shadow: 0px 3px 4px #0051A1 inset;
	}
a.ldd_subfoot{
	background-color: #f0f0f0;
	color: #444;
	display: block;
	clear: both;
	padding: 15px 20px;
	text-transform: uppercase;
	font-family: Arial, serif;
	font-size: 12px;
	text-shadow: 0px 0px 1px #fff;
	-moz-box-shadow: 0px 0px 2px #777 inset;
	-webkit-box-shadow: 0px 0px 2px #777 inset;
	-box-shadow: 0px 0px 2px #777 inset;
	}
ul.ldd_menu ul {
	list-style: none;
	float: left;
	border-left: 1px solid #2A6DC3;
	margin: 20px 0px 10px 30px;
	padding: 10px;
	}
li.ldd_heading {
	font-family: Georgia, serif;
	font-size: 13px;
	font-style: italic;
	color: #69C3FF;
	text-shadow: 0px 0px 1px #B03E23;
	padding: 0px 0px 10px 0px;
	}
ul.ldd_menu ul li a {
	font-family: Arial, serif;
	font-size: 10px;
	line-height: 20px;
	color: #fff;
	padding: 1px 3px;
	}
ul.ldd_menu ul li a:hover {
	-moz-box-shadow: 0px 0px 2px #2A6DC3;
	-webkit-box-shadow: 0px 0px 2px #2A6DC3;
	box-shadow: 0px 0px 2px #2A6DC3;
	background: #007BC2;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	$(function() {
		var $menu = $('#ldd_menu');
		$menu.children('li').each(function(){
			var $this = $(this);
			var $span = $this.children('span');
			$span.data('width',$span.width());
			$this.bind('mouseenter',function(){
				$menu.find('.ldd_submenu').stop(true,true).hide();
				$span.stop().animate({'width':'440px'},300,function(){
					$this.find('.ldd_submenu').slideDown(300);
				});
			}).bind('mouseleave',function(){
				$this.find('.ldd_submenu').stop(true,true).hide();
				$span.stop().animate({'width':$span.data('width')+'px'},300);
			});
		});
	});
</script>

4. HTML

<ul id="ldd_menu" class="ldd_menu">
	<li>
		<span>Меню №1</span>
		<div class="ldd_submenu">
			<ul>
				<li class="ldd_heading">Заголовок №1</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №2</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
				<ul>
				<li class="ldd_heading">Заголовок №3</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
		</div>
	</li>
	<li>
		<span>Меню №2</span>
		<div class="ldd_submenu">
			<ul>
				<li class="ldd_heading">Заголовок №1</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №2</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №3</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
		</div>
	</li>
	<li>
		<span>Меню №3</span>
		<div class="ldd_submenu">
			<ul>
				<li class="ldd_heading">Заголовок №1</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №2</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №3</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
		</div>
	</li>
</ul>

#portfolio {
	width: 600px;
	height: 400px;
	margin: 0 auto;
	}
.portfolio {
	list-style: none;
	position: relative;
	z-index: 9;
	}
.portfolio li {
	float: left;
	margin: 0;
	padding: 0;
	display: inline;
	background: none;
	width: 200px;
	height: 200px;
	}
.portfolio li a {
	display: block;
	width: 200px;
	height: 200px;
	overflow: hidden;
	position: relative;
	}
.portfolio li a .image {
	display: block;
	}
.portfolio li a .label {
	position: absolute;
	top: 157px;
	left: 0;
	z-index: 5;
	}
.portfolio li a .text {
	position: absolute;
	top: 157px;
	left: 0;
	z-index: 4;
	display: block;
	}
.portfolio li a b {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: none;
	width: 250px;
	height: 200px;
	background: #1f0607;
	opacity: 0.7;
	filter: alpha(opacity=70);
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

3. Подключение jQuery.Easing

<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

4. JavaScript

<script type="text/javascript">
	$(document).ready(function(){
		$('.portfolio a').hover(function(){
			at = $(this).find('.text');
			at.stop().animate({top:250},200,'easeInCubic',function(){
				$(this).css({top:-200}).animate({top:0},300,'easeOutCubic');
			});
		},function(){
			at = $(this).find('.text');
			at.stop();
			if (parseInt(at.css('top')) >= 157) {
				at.animate({top:157},200,'easeOutCubic');
			} else {
				at.animate({top:-250},200,'easeInCubic',function(){
					$(this).css({top:250}).animate({top:157},200,'easeOutCubic');
				});
			}
		});
	});
</script>

5. HTML

<div id="portfolio">
	<ul class="portfolio">
		<li>
			<a href="#"> <!-- Здесь может быть ссылка на сайт -->
				<img src="images/portfolio-na-jquery/ff0000.jpg" alt="Красный" class="image" />
				<img src="images/portfolio-na-jquery/ff0000.png" alt="" class="text" />
			</a>
		</li>
		<li>
			<a href="#"> <!-- Здесь может быть ссылка на сайт -->
				<img src="images/portfolio-na-jquery/ff8000.jpg" alt="Оранжевый" class="image" />
				<img src="images/portfolio-na-jquery/ff8000.png" alt="" class="text" />
			</a>
		</li>
		<li>
			<a href="#"> <!-- Здесь может быть ссылка на сайт -->
				<img src="images/portfolio-na-jquery/008000.jpg" alt="Зелёный" class="image" />
				<img src="images/portfolio-na-jquery/008000.png" alt="" class="text" />
			</a>
		</li>
		<li>
			<a href="#"> <!-- Здесь может быть ссылка на сайт -->
				<img src="images/portfolio-na-jquery/00bbff.jpg" alt="Голубой" class="image" />
				<img src="images/portfolio-na-jquery/00bbff.png" alt="" class="text" />
			</a>
		</li>
		<li>
			<a href="#"> <!-- Здесь может быть ссылка на сайт -->
				<img src="images/portfolio-na-jquery/0000ff.jpg" alt="Синий" class="image" />
				<img src="images/portfolio-na-jquery/0000ff.png" alt="" class="text" />
			</a>
		</li>
		<li>
			<a href="#"> <!-- Здесь может быть ссылка на сайт -->
				<img src="images/portfolio-na-jquery/8000ff.jpg" alt="Фиолетовый" class="image" />
				<img src="images/portfolio-na-jquery/8000ff.png" alt="" class="text" />
			</a>
		</li>
	</ul>
</div>

#gallery {
	width: 528px;
	overflow: hidden;
	margin: 0 auto;
	background: #f8f8f8;
	border: 1px solid #c7c7c7;
	border-radius: 5px;
}
#gallery a {
	display: block;
	float: left;
	color: #fff;
	width: 150px;
	height: 150px;
	margin: 8px;
	padding: 4px;
	border: 1px solid #c7c7c7;
	border-radius: 3px;
}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

3. Подключение jQuery Touch Gallery Min

<script type="text/javascript" src="jquery.touch-gallery-1.0.0.min.js" /></script>

4. HTML

<!--1.jpg - оригинальное изображение, 1-th.jpg - уменьшеное изображение -->
<div id="gallery">
	<a href="1.jpg"><img src="1-th.jpg" /></a>
	<a href="2.jpg"><img src="2-th.jpg" /></a>
	<a href="3.jpg"><img src="3-th.jpg" /></a>
	<a href="4.jpg"><img src="4-th.jpg" /></a>
	<a href="5.jpg"><img src="5-th.jpg" /></a>
	<a href="6.jpg"><img src="6-th.jpg" /></a>
	<a href="7.jpg"><img src="7-th.jpg" /></a>
	<a href="8.jpg"><img src="8-th.jpg" /></a>
	<a href="9.jpg"><img src="9-th.jpg" /></a>
</div>
<!--1.jpg - оригинальное изображение, 1-th.jpg - уменьшеное изображение -->

5. JavaScript

<script type="text/javascript">
	$('#gallery a').touchGallery();
</script>

JavaScript нужно добавить перед закрывающим тегом </body>

#text {
	height: 100px;
	}
.name {
	font: 30px Tahoma;
	display: block;
	margin: 0 0 10px 0;
	color: #0094d6;
	text-shadow: 1px 1px 0 white, 2px 2px 2px #DDD;
	}
.descr {
	font: 15px Tahoma;
	padding: 0 0 0 35px;
	color: #ff7700;
	display: block;
	}

2. Подключение jQuery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

3. Подключение jQuery.Cycle.Lite

<script type="text/javascript" src="https://raw.github.com/malsup/cycle/master/jquery.cycle.lite.js"></script>

4. JavaScript

<script type="text/javascript">
	$(document).ready(function() {
		var parentTaglineEl = $('#text');
		parentTaglineEl.cycle({
			fx: 'fade',
			speed: 1000,
			timeout: 6000,
			random:  0
		});
	});
</script>

5. HTML

<div id="text">
	<div><span class="name">Дубна</span><span class="descr"> — наукоград на севере Московской области, крупнейший в России центр по исследованиям в области ядерной физики.</span></div>
	<div><span class="name">Жуковский</span><span class="descr"> — город в Московской области России. Наукоград Российской Федерации. Расположен в 25 км к юго-востоку от Москвы.</span></div>
	<div><span class="name">Королёв</span><span class="descr">  — город областного подчинения в Московской области России, наукоград, сотрудничает с 52 городами из 26 стран мира.</span></div>
</div>

.box {
	width: 650px;
	height: 250px;
	border: 3px solid #FF4E00;
	}

2. Подключение jQuery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

3. JavaScript

<script type="text/javascript">
	setTimeout(function(){$('.box').fadeOut('fast')},30000);  //30000 = 30 секунд
</script>

4. HTML

<div class="box">
Этот блок скоро исчезнет
</div>