Слайд эффект при наведении мышки на jQuery

2345634534В уроке рассмотрим создание слайд эффекта при наведении мышки. Эфект и интерактивен и функционален. Эффект заключается в том, чтобы под изображением находился необходимый текст, и при наведении мышкой на изображений, этот текст красиво занимал место изображения. Что не быть голословным вот пример. А также тут можно сказать и все исходники нашего урока. Все реализовано на любимым нами jQuery.

Как всегда, в самом верху документа подключаем фреймворк, стили, другие скрипты. Не забываем про относительные пути к этим файлам.

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="css/style.css" />

	<script type="text/javascript" src="javascript/jquery.min.js"></script>
	<title>Эффект для изображений - world-blog.ru</title>

	<script type="text/javascript">
		$(function() {
$(".slideBox").hover(function(){
	$(this).find("img").stop().animate({
		top:-325
	}, 800);
}, function(){
	$(this).find("img").stop().animate({
		top:0
	}, 800);
});
		});

	</script>

</head>

Теперь в теле документа нам необходимо в слой с классом «slideBox» поместить изображение и текст под ним. Текст в свою очередь должен находится внутри <div> с классом «content»:

	<div id="container">

		<div class="slideBox">
			<img src="images/picture1.jpg" alt="testing" />

			<div class="content">
				<h1>Блог World Programs. Ajax, SEO, Linux, PHP, Mysql, Adobe, Дизайн и другие статьи.</h1>
				<p>В этом блоге наша команда собирает самые интересные материалы посвященные веб программированию, веб дизайну, верстке и т.д., одним словом связаные с нашей работой. Это общедоступный архив наиболее интересных материалов нашей компании. </p>
			</div>

			</div>
	</div>

Как Вы видите под картинкой может быть не просто текст, а полноценный HTML код — функционально и интерактивно. Как говарится другого не держим