Pull to refresh

Анимированные меню на jQuery [часть 2]

Reading time 3 min
Views 4.3K
Original author: Adrian Pelletier
По мотивам этого перевода.

На одном из текущих проектов мы хотели добавить эффект на иконки меню — приподнимание в момент наведения мышкой. Я поэкспериментировал, используя встроенный в jquery эффект animate, на иконках двух типов: с отражениями и с тенями.

image

Смотрим демо
Скачать

Как HTML, так и CSS достаточно просты и имеют структуру, аналогичную обычным навигационным панелям и меню в интернете (чтобы не захламлять топик, я не стал включать сюда HTML/CSS код примеров, но вы можете посмотреть его в демо или в скачанных файлах — ссылка ниже).

Вкратце, с помощью JS добавляем отражение/тень каждому элементу <li>. Потом изменяем позицию с эффектом анимации, а также меняем прозрачность этих добавленных элементов и самих иконок из меню в момент наведения мыши.

Я добавил .stop(), чтобы избежать выстраивания любой очереди событий в случае быстрого перемещения мышки туда сюда по навигационной панели.
// Begin jQuery

$(document).ready(function() {

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

  // Append span to each LI to add reflection

  $("#nav-reflection li").append("<span></span>");  

  // 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" width="81" height="27" alt="" />');

  // 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: "0px", opacity: 1 }, 250);
  });

// End jQuery

});


* This source code was highlighted with Source Code Highlighter.

Обращаю внимание, что ради данной быстрой демки, я не стал заботиться о поддержке в IE6.

PS
Данный пример не требует jQuery UI и будет также работать на чистом jQuery. Но в демо по ссылке и в файлах к загрузке — я оставил скрипт UI для тех, кто захочет поиграть с анимированным изменением текста, фона, границ или окружающего цвета.
Tags:
Hubs:
+73
Comments 39
Comments Comments 39

Articles