Shadow animation jQuery plugin

Bitstorm.org > jQuery plugins > Scroll animation

Easily animate box shadows

With this jQuery plugin, you can extend the animate function to support the CSS box shadow-property. You can animate the color, the x- and y-offset, the blur-radius and spread-radius. Mark Carver contributed code to support the alpha channel.

If you're going to use the alpha (transparency) channel, don't use 0 (zero) as alpha value, but a small number like 0.01. Otherwise Firefox will lose the color information.

Example:

$('#box1').animate({shadow: '0 0 30px #44f'});

Demo

mouse over
mouse over
click me

Download

Just upload this file to your server in include it in your HTML below jQuery.

Restrictions

The plugin works in the current versions for Firefox, Safari, Chrome. It also works in the fourth preview release of Internet Explorer 9.

Due to a bug in Opera, it doesn't work in this browser.

Currently, the shadow offset, blur and spread should be defined in pixels, so no ems, percentages etcetera. The plugin supports only one shadow.

License

This jQuery-plugin is available under the MIT and GPL License.

Edwin Martin <edwin@bitstorm.org>