jQuery animate "text-shadow" css property

Question

So as i've worked with jQuery's .animate() method i've learned that in order to animate the left margin you would have to use something like this:

$('#thing').animate({marginLeft: 20}, 1000);

Which is different than using the css property margin-left: 20px;

How could I use the text-shadow property inside animate() ?

Answer 1

CSS transitions are the best way for this, as every browser in common usage that supports text-shadow also supports transitions.

In that case, you just set the transition properties, then change the style either with JS or by changing the class.

Basic example: http://jsfiddle.net/adZ42/1/

More info on retrofitting this into jQuery: http://css3.bradshawenterprises.com/legacy/