Реалистичный 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

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

два + пятнадцать =