ГлавнаяСтатьиWebFAQОбучениеКонтакты
Web
CSS
JavaScript
HTML
C#
jQuery
PHP
Flash
Yii / Yii2
Java
Net
CMS
3D
Parallax
MySQL
Ajax
XML
SEO
FTP
JSON
Design
Python
Back-end
Front-end
ASP
Perl
Template
Domain
Hosting
Plugin
Browser
DNS
SVG
Effect
Опрос
Какой язык программирования вы используете для написания сайта?








Авторизация
Логин:
Пароль:

Эффект затухания ссылок на 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);
  });
});

Все готово!