Animating elements of text-shadow with jQuery

Question

I was wondering if there was any way to, using jQuery, animate properties of text-shadow like size or colour.

It's annoying that there aren't individual properties like text-shadow-color instead of the statement only being available in combined form.

Answer 1

Use javascript to parse the CSS property and create a new one

var myelement_shadow = $('myelement').css('text-shadow');

will give you the property

Use javascript's String functions to work with it: http://www.w3schools.com/jsref/jsref_obj_string.asp and parsefloat('2px') will give you just the 2

Answer 2

As an alternative to using jQuery, you can use the powerful animation capabilities of the UIZE JavaScript Framework. See different elements of multiple text shadows being animated at the same time in the following example...

http://www.uize.com/examples/hover-fader-text-shadow-animation.html