Главная страница » jQuery » Подчеркивание ссылок с анимацией на jQuery

Подчеркивание ссылок с анимацией на jQuery

Сегодня я бы хотел показать как создать подчеркивание ссылок с анимацией на jQuery. В интернете вы можете найти множество похожего контента, где подчеркивание реализовано с помощью CSS. Но мы решили сделать это с помощью плагина который имеет немного больше преимуществ. linkUnderline — это очень маленький плагин jQuery, который использует CSS-переходы для создания анимированных, настраиваемых линий под вашим текстом при наведении.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Иногда нужно реализовать элементарные вещи на сайте, которые станут отличным дополнением для вашего сайта, кроме этого такой подход к организации ссылок сейчас весьма популярен. Также вы можете воспользоваться готовыми решениями в нашем интернет-магазине шаблонов.

Создаем подчеркивание ссылок с анимацией на jQuery.

Шаг 1. HTML

Для начала нам необходимо подключить скрипты, если у вас, а у вас уже наверняка есть один подключенный jQuery, то проверьте чтобы не было конфликтов:

1 2	<script src="jquery-3.2.1.min.js"></script> <script src="jquery.linkunderanim.js"></script>

Затем нам необходимо создать достаточную простую разметку, которая будет содержать наши ссылки заключенные в общий id, который будет подвязан к нашему плагину.

<li><a href="">Главная</a></li>

<li><a href="">Интресно</a></li>

<li><a href="">Плагины</a></li>

<li><a href="">Контакты</a></li>

</ul>

Так как всю работу будет выполнять плагин, мы можем упустить стили CSS, и перейти к следующему шагу.

Подчеркивание ссылок с анимацией на jQuery

Шаг 2. JS

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

$(function(){

$("#myNav").linkUnderlineAnim();

});

Вы можете легко настроить анимацию и подчеркивание, указав следующие параметры функции linkUnderlineAnim ().:

$("#myNav").linkUnderlineAnim({

// Скорость анимации в милисекундах

"speed" : 300,

// Цвет

"color" : "#DB3340",

// Толщина линии

"thickness" : 2,

// расстояние в пикселях от ссылки

"distance" : 0

});

Это весь плагин, как вы заметили он не «тяжелый» и с ним легко работать, я думаю это достаточно неплохой вариант, чтобы организовать подчеркивание ссылок на сайте.