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

 

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

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

Шаг 1. HTML

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

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

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

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

Шаг 2. JS

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

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

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

Вот и все. Готово!