Эффект затухания ссылок на jQuery

Опубликовано 25.06.2019

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

Чтобы реализовать такой эффект затухания подключим библиотеку jQuery в наш проект между тэгами head:

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

Затем создадим HTML разметку:

<ul class="social" id="jquery">
  <li class="ico_1"><a href="#"><strong>Journey</strong></a></li>
  <li class="ico_2"><a href="#"><strong>Health</strong></a></li>
  <li class="ico_3"><a href="#"><strong>Game</strong></a></li>
  <li class="ico_4"><a href="#"><strong>Money</strong></a></li>
  <li class="ico_5"><a href="#"><strong>Chat</strong></a></li>
  <li class="ico_6"><a href="#"><strong>Pizza</strong></a></li>
  <li class="ico_7"><a href="#"><strong>Notepad</strong></a></li>
  <li class="ico_8"><a href="#"><strong>Drawing</strong></a></li>
  <li class="ico_9"><a href="#"><strong>Clock</strong></a></li>
</ul>

Добавим CSS стили:

.social { 
  list-style: none; 
  margin: 30px auto; 
  width: 380px;
}
.social li { 
  display: inline-block;
  background-repeat: no-repeat;
}
.social li a {
  display: block;
  width: 54px;
  height: 54px;
  padding-right: 10px;
  position: relative;
  text-decoration: none;
}
.social li a strong {
  font-weight: normal;
  position: absolute;
  left: 20px; 
  top: -1px;
  color: #ffffff;
  padding: 3px;
  z-index: 9999;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
  background-color: rgba(0, 0, 0, 0.7);
  -moz-border-radius: 3px;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 3px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

Также в стилях подключаем изображения для ссылок:

li.ico_1 { background-image:url("images/1.png"); }
li.ico_2 { background-image:url("images/2.png"); }
li.ico_3 { background-image:url("images/3.png"); }
li.ico_4 { background-image:url("images/4.png"); }
li.ico_5 { background-image:url("images/5.png"); }
li.ico_6 { background-image:url("images/6.png"); }
li.ico_7 { background-image:url("images/7.png"); }
li.ico_8 { background-image:url("images/8.png"); }
li.ico_9 { background-image:url("images/9.png"); }

Для того чтобы эффект заработал, добавим js код:

$(document).ready(function(){
  // Скрываем все подсказки
  $("#jquery li").each(function() {
    $("a strong", this).css("opacity", "0");
  });
  $("#jquery li").hover(function(){
    // Навели мышь
    $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.2);
    $("a strong", this)
      .stop()
      .animate({
        opacity: 1,
        top: "-10px"
      }, 300);
  }, function(){
    // Убрали мышь
    $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1);
    $("a strong", this)
      .stop()
      .animate({
        opacity: 0,
        top: "-1px"
      }, 300);
  });
});

Все готово!

Демо