	<!doctype html>
	<html>
	<head>
	<title>Shadow animation jQuery plugin</title>
	<link title="Main" rel="stylesheet" type="text/css" href="../home.css">
	<link href="demo.css" rel="stylesheet">
	</head>
	<body>
	<h1>Shadow animation jQuery plugin</h1>

	<div id="body">

	<p class="crumbtrail"><a href="/">Bitstorm.org</a> > <a href="../">jQuery plugins</a> > Shadow animation</p>

	<h2>Easily animate box shadows</h2>

	<p>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).</p>

	<h2>Example</h2>

	<p>Change the shadow to a centered 30-pixel blur with the color blue (#44f):</p>

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

	<h2>Demo</h2>

	<div id="box1" onmouseover="$('#box1').stop().animate({boxShadow: '0 0 30px #44f'})" onmouseout="$('#box1').stop().animate({boxShadow: '0 0 10px #000'})">mouse over</div>

	<div id="box2" onmouseover="$('#box2').stop().animate({boxShadow: '0 0 50px'}, 'fast')" onmouseout="$('#box2').stop().animate({boxShadow: '0 0 0'}, 'fast')">mouse over</div>

	<div id="box3" onmousedown="$('#box3').stop().animate({boxShadow: '3px 3px 3px', top: 3}, 'fast')" onmouseup="$('#box3').stop().animate({boxShadow: '10px 10px 15px', top: 0}, 'fast')">click me</div>

	<h2>Download</h2>

	<p>For jQuery 1.8 and later:</p>

	<ul>
	<li><a href="jquery.animate-shadow.js">jquery.animate-shadow.js</a> (5.0kB)</li>
	<li><a href="jquery.animate-shadow-min.js">jquery.animate-shadow-min.js</a> (3.8kB, minified)</li>
	</ul>

	<p>Just upload this file to your server and include it in your HTML below jQuery.</p>

	<h2>Archive</h2>

	<p>For jQuery 1.7.2 and earlier:</p>

	<ul>
	<li><a href="archive/jquery.animate-shadow.js">jquery.animate-shadow.js</a> (4.5kB)</li>
	<li><a href="archive/jquery.animate-shadow-min.js">jquery.animate-shadow-min.js</a> (2.3kB, minified)</li>
	</ul>

	<h2>Restrictions</h2>

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

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

	<h2>Release history</h2>

	<p>Version 1.9, released January 24th, 2013. Bugfix by Sebastian J. Keller for compatibility with Firefox 3.6.</p>
	<p>Version 1.8, released August 20th, 2012. New version for updated animation API in jQuery 1.8.</p>
	<p>Version 1.7, released May 29th, 2011. Compatible with jQuery 1.6.1.</p>
	<p>Version 1.6, released May 28th, 2011. Fixed bug with floating point alpha values.</p>
	<p>Version 1.5, released January 20th, 2011. Renamed shadow to boxShadow.</p>
	<p>Version 1.4, released January 9th, 2011. Fixed support for elements without shadow set.</p>
	<p>Version 1.3, released December 30th, 2010. Fixed support for <a href="test.html">alpha channel and negative offset</a>.</p>
	<p>Version 1.2, released October 3th, 2010. Fixed support for placing script in head.</p>
	<p>Version 1.1, not released.</p>
	<p>Version 1.0, released June 9th, 2010. First release.</p>

	<h2>License</h2>

	<p>This jQuery-plugin is available under the <a href="../license.html">MIT and GPL License</a>.</p>

	</div>

	<address><a href="/">Edwin Martin</a> <<a href="mailto:edwin@bitstorm.org">edwin@bitstorm.org</a>></address>

	<script src="../jquery-1.9.1.min.js"></script>
	<script src="jquery.animate-shadow.js"></script>

	<script>var _gaq=[['_setAccount','UA-93616-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>

	</body>
	</html>