Реалистичный Hover эффект с JQuery


Дорогие друзья, сегодня хочу показать Вам интересный эффект, который можно применить в своей работе. Сам эффект описан на многих сайтах. Привожу его здесь, просто что бы напомнить, как легко можно выполнить такую анимацию.  Анимацию в этом эффекте создаёт jquery.  Вот как это выглядит:

Код HTMLи CSSдостаточно прост и имеют обычную структуру и стиль,  применяемые для создания большинства навигационных панелей и меню. Код HTML:

<div id="content">
<h1>Отражение</h1>
<ul id="nav-reflection">
	<li class="button-color-1"><a title="Моя ссылка" href="#">Текст ссылки</a></li>
	<li class="button-color-2"><a title="Моя ссылка" href="#">Текст ссылки</a></li>
	<li class="button-color-3"><a title="Моя ссылка" href="#">Текст ссылки</a></li>
	<li class="button-color-4"><a title="Моя ссылка" href="#">Текст ссылки</a></li>
</ul>
<!-- end reflection navigation -->
<h1>Тень</h1>
<ul id="nav-shadow">
	<li class="button-color-1"><a title="Моя ссылка" href="#">Текст ссылки</a></li>
	<li class="button-color-2"><a title="Моя ссылка" href="#">Текст ссылки</a></li>
	<li class="button-color-3"><a title="Моя ссылка" href="#">Текст ссылки</a></li>
	<li class="button-color-4"><a title="Моя ссылка" href="#">Текст ссылки</a></li>
</ul>
<!-- end shadow navigation --></div>
<!-- end content -->

Код JS:

/*
Main Javascript for jQuery Realistic Hover Effect
*/

/* =Realistic Navigation
============================================================================== */

	// Begin jQuery

	$(document).ready(function() {

	/* =Reflection Nav
	-------------------------------------------------------------------------- */

		// Append span to each LI to add reflection

		$("#nav-reflection li").append("");

		// Animate buttons, move reflection and fade

		$("#nav-reflection a").hover(function() {
		 $(this).stop().animate({ marginTop: "-10px" }, 200);
		 $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
		},function(){
		 $(this).stop().animate({ marginTop: "0px" }, 300);
		 $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
		});

	/* =Shadow Nav
	-------------------------------------------------------------------------- */

		// Append shadow image to each LI

		$("#nav-shadow li").append('<img class="shadow" src="images/icons-shadow.jpg" alt="" width="81" height="27" />');

		// Animate buttons, shrink and fade shadow

		$("#nav-shadow li").hover(function() {
			var e = this;
		 $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
		 	$(e).find("a").animate({ marginTop: "-10px" }, 250);
		 });
		 $(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
		},function(){
			var e = this;
		 $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
		 	$(e).find("a").animate({ marginTop: "0px" }, 250);
		 });
		 $(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0", opacity: 1 }, 250);
		});

	// End jQuery

	});
  • Посмотреть пример
  • Скачать исходник
Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

2 комментария

  1. Nucleon14/06/2010
    • Николай14/06/2010

Добавить коментарий

двадцать − десять =