Shadow animation jQuery plugin

Bitstorm.org > JavaScript > jQuery plugins > Shadow 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 rgba colors (the alpha channel) and Jason Redding contributed code to support multiple shadows.

Example

Change the shadow to a centered 30 pixel blur with the color blue (#44f):


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

Demo

mouse over

click me

Download

Download the full version or the minified version here:

jquery.animate-shadow.js (7.1kB, best for development)
jquery.animate-shadow-min.js (3.6kB, minified, best for production)

Just upload this file to your server and include it in your HTML below jQuery. Don't link to these files on this domain directly.

CDN

The easiest way is to use a content delivery network. Just paste the following code in your HTML just below jQuery.


<script src="//cdn.jsdelivr.net/jquery.shadow-animation/1/mainfile"></script>

Package

To install the whole package, you can use one of the following commands:

git clone https://github.com/edwinm/Shadow-animation-jQuery-plugin.git

npm install jquery-shadow-animation

bower install jquery-shadow-animation

Restrictions

The plugin works in the recent versions of Firefox, Safari, Chrome, Opera and Internet Explorer 9+.

Currently, the shadow offset, blur and spread should be defined in pixels, so no ems, percentages etcetera. jQuery should be at least version 1.8.

Release history

Version 1.11, released September 23th, 2013. Compatible with jQuery noConflict.

Version 1.10, released July 17th, 2013. Multiple shadow support contributed by Jason Redding.

Version 1.9, released January 24th, 2013. Bugfix by Sebastian J. Keller for compatibility with Firefox 3.6.

Version 1.8, released August 20th, 2012. New version for updated animation API in jQuery 1.8.

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.