Animated borders for any block level element. This plugin creates an animated border with configurable thickness and color.

Examples

Single Pixel
Toggle Highlight
Fat Border
Hover Triggered

Download

Instructions

The animated border method toggles animated borders on an element. To apply animated borders to an elements:

$('div.alpha').animatedBorder({size : 1, color : 'red'});

Apply it again to remove the borders:

$('div.alpha').animatedBorder();

The plugin accepts a configuration object. You can specify a background color, and the size of the border.

options = {
    size: 2,
    color: '#6699CC'
}

Known Issues

  • Background patterns are not handled with the default stripe.gif file. The plugin uses the the background color of the divs to make the border color. This means that the non-transparent area of the checkerboard has to match the background color of the page for the illusion to work. If you had a page with surrounding elements under the border, or you had a non white background, you should create a new animated gif with blocks that are transparent and the desired border color.