Border Animation Effects with jQuery and CSS3 - Line.js

Line.js is a jQuery plugin that makes it easy to implement subtle animation effects to your DIV's border using CSS3 transitions. Simply add the appropriate class to any div with the position: relative; property to trigger the required effect.

Basic Usage:

1. Include the latest jQuery javascript library and jQuery line.js plugin's javascript and CSS files into your Html file.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="line.js"></script>
<link rel="stylesheet" type="text/css" href="line.css" />

2. Add an animation class to your Div element. You can find more CSS effects in the line.css.

<div class="demo float-left allwayround">
Your content goes here.
</div>

3. The DIV element must have a position value of relative.

.demo {
position: relative;
...
}

4. Initialize the plugin and custom the animation.

<script type="text/javascript">
$( document ).ready(function() {
$('.allwayround').borderContinuous(animationDuration, borderWidth, "onhover", backgroundColor);	
});
</script>

5. Default settings.

var animationDuration = "0.8" //Time for the whole animation to take place. measured per s. Decimals or integers are both valid, ensure to add the 0 when using decimal values.
var borderWidth = " 4px " //width of the border. measured in any valid css unit - px, %, etc
var backgroundColor = "white" //CSS value
var borderContent = ".border-content {position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}" //CSS class for wrapping existing content

---

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