Create Animated Text Underlines With jQuery - linkUnderline

linkUnderline is a very small jQuery plugin which uses CSS transitions to create animated, configurable, hover-triggered lines under your text on hover.

Basic usage:

1. Insert the latest version of jQuery library and jQuery linkUnderline plugin's script into the document.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" 
        crossorigin="anonymous"></script>
<script src="jquery.linkunderanim.js"></script>

2. Call the function on the target element (for example nav) which contains anchor links. Done.

<ul id="myNav">
  <li><a href="">Home</a></li>
  <li><a href="">jQuery</a></li>
  <li><a href="">Angular</a></li>
  <li><a href="">React</a></li>
  <li><a href="">Vue</a></li>
</ul>

$(function(){

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

});

3. Config the animated underline by passing the following options to the linkUnderlineAnim() function.

$("#myNav").linkUnderlineAnim({

  // animation speed in milliseconds
  "speed"       : 300,

  // hex color
  "color"       : "#DB3340",

  // thickness
  "thickness"     : 2,

  // distance in pixels from top
  "distance"      : 0

});

---

This awesome jQuery plugin is developed by advancedwebtechnolog. For more Advanced Usages, please check the demo page or visit the official website.