linkunderline

jQuery plugin to create an animated underline under the text links.

HOW TO USE

1. Download our jQuery plugin jquery.linkunderanim.min.js and upload on your server/website
2. Include the latest version of jQuery with the script element inside the head element of your web page
3. Include Link Underline Animation javascript file (jquery.linkunderanim.min.js) in the script element
4. Create HTML markup of the links (with unordered list)
5. Select the list with jQuery and invoke linkUnderlineAnim method with or without options

DEMO 1

Example 1 (creates the animated underlines with default values: speed = 0.3 seconds, color = "#DB3340", thickness = 2 and distance = 0)

HTML

<ul id="links">

<li><a href="">First link</a>

<li><a href="">Second link</a>

<li><a href="">Third link</a>

</ul>

JS

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

DEMO 2

Example 2 (creates the animated underlines with options: speed = 0.3 seconds, color = "green", thickness = 3 and distance = 2)

HTML

<ul id="links">

<li><a href="">First link</a>

<li><a href="">Second link</a>

<li><a href="">Third link</a>

</ul>

JS

$("#links").linkUnderlineAnim({

speed: 600,  //speed of underline animation (ms)   color: "green", // color of underline (can be any CSS3 compatible color    thickness: 3, // thickness of underline (px)    distance: 2 // distance of the underline from the text (px) 

}); //this uses the customized options

OPTIONS

speed - speed of underline animation (ms) (default 300)

color - color of underline (can be any CSS3 compatible color (default "#DB3340")

thickness - thickness of underline (px) (default 2)

distance - distance of the underline from the text (px) (default 0)