Lightweight jQuery Plugin For Inset Border Effects - Inset Border

File Size: 4.5KB
Views Total: 587
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight jQuery Plugin For Inset Border Effects - Inset Border

Inset Border is a lightweight (~2kb unminified) jQuery plugin for putting animated inset border effect around the html elements (typically images).

How to use it:

1. Include the latest jQuery javascript library and jquery.insetborder.js script on your web page

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.insetborder.js"></script>

2. Insert an image that you'd like to apply the inset border effect to

<a href="#" class="demo"> <img src="1.png"/> </a>

3. Call the borderEffect() function with options

<script type="text/javascript">
$(document).ready(function(){
$('a.demo').borderEffect({
borderColor : '#cccccc',
speed : 100, // the speed of animations (ms)
borderWidth: 10,
borderClass : "border-effect",
zIndex : 100
});
});
</script>

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