Create Animated Text Underlines With jQuery - linkUnderline

File Size: 5.51 KB
Views Total: 2732
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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>



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


  // 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.