Lightweight jQuery Plugin For Inset Border Effects - Inset Border
| File Size: | 4.5KB |
|---|---|
| Views Total: | 595 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.










