jQuery Plugin For CSS3 Animated Anchor Links - anchorHoverEffect

anchorHoverEffect is a tiny jQuery plugin that applies fancy CSS3 animations to your anchor links on mouse hover. Works on all modern browser which support CSS3 transforms and transitions.

How to use it:

1. Load the core style sheet anchorHoverEffect.css in the head section of the html document.

<link href="anchorHoverEffect.css" rel="stylesheet">

2. Load the latest version of jQuery library and the jQuery anchorHoverEffect plugin's script at the end of the document.

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="anchorHoverEffect.js"></script>

3. Call the function on the anchor links and you will see a fancy 3D roller effect on mouse hover.

<ul class="demo">
 <li><a href="#">jQuery</a></li>
 <li><a href="#">jQueryScript</a></li>
 <li><a href="#">ReactJS</a></li>
 <li><a href="#">React Native</a></li>
</ul>

4. The plugin currently comes with 4 fancy CSS3 animations. You can add your own CSS3 animations as you seen in the anchorHoverEffect.css.

$(".demo-1 a").anchorHoverEffect();
$(".demo-2 a").anchorHoverEffect({type: 'brackets'});
$(".demo-3 a").anchorHoverEffect({type: 'flip'});
$(".demo-4 a").anchorHoverEffect({type: 'borderBottom'});

About Author:

Author: Satinder Singh

Website: http://codepedia.info/anchor-hover-effect-jquery-plugin/

---

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