Create Animated Text Underlines With jQuery - linkUnderline

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.

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.

  • Publication date: 19.11.2017
  • Source