The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

anchorHoverEffect : jQuery Plugin for CSS3 Animated Anchor Links

Tags :

Plugin rate :

anchorHoverEffect is a tiny jQuery plugin that applies fancy CSS3 animations to your anchor links on mouse hover i.e makes you anchor tag fancy and animated. Works on all modern browser which support CSS3 transforms and transitions. Currently, it provides four different types of effects .i.e Roller 3D effect, Flip Effect, Bracket Effect, and BorderBottom effect.

Implementation: 

How to use it:
First, we need to include anchorHoverEffect.css file in our head tag. Then load anchorHoverEffect.js script after loading jQuery library.

1
2
3
<link href="../anchorHoverEffect.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="../anchorHoverEffect.js"></script>

Add Html anchor tags whom you want to make it fancy and animated on hover.

1
2
3
4
5
6
<ul class="ulDefault">
 <li><a href="#">jQuery</a></li>
 <li><a href="#">Angular Js</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">Asp.net MVC</a></li>
</ul>

Call the function on anchor tag you just added.

1
$(".ulDefault a").anchorHoverEffect();
Options: 
roller3d
String
is set as default, and it makes anchor tag as 3d rolling effect
brackets
String
It added left right rectangle brackets at start and end of anchor text with animation.
flip
String
It flips the anchor text.
borderBottom
String
It adds border bottom with animation.
Screenshots

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.9
Current version
1
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Comments [0]