Bitstorm.org > jQuery plugins > Shadow animation
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 rgba-colors (the alpha channel).
Change the shadow to a centered 30-pixel blur with the color blue (#44f):
$('#box1').animate({boxShadow: '0 0 30px #44f'});
Just upload this file to your server and include it in your HTML below jQuery.
Note that in previous releases, the property to animate was called shadow. It has been renamed to boxShadow to be compliant with the name in CSS. If you upgrade, please adjust your code accordingly.
The plugin works in the recent versions of Firefox, Safari and Chrome and Internet Explorer 9.
Due to a bug in Opera, it doesn't work in this browser. A bugreport has been filed.
Currently, the shadow offset, blur and spread should be defined in pixels, so no ems, percentages etcetera. The plugin supports only one shadow.
Version 1.7, released May 29th, 2011. Compatible with jQuery 1.6.1.
Version 1.6, released May 28th, 2011. Fixed bug with floating point alpha values.
Version 1.5, released January 20th, 2011. Renamed shadow to boxShadow.
Version 1.4, released January 9th, 2011. Fixed support for elements without shadow set.
Version 1.3, released December 30th, 2010. Fixed support for alpha channel and negative offset.
Version 1.2, released October 3th, 2010. Fixed support for placing script in head.
Version 1.1, not released.
Version 1.0, released June 9th, 2010. First release.
This jQuery-plugin is available under the MIT and GPL License.