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.
Might be a little late for this answer, but here it is anyway...
I solved it by implementing a "virtual" css-property to be animated like this
$.fx.step.textShadowBlur = function(fx) {
$(fx.elem).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px black'});
};
$(el).css({textShadowBlur:20})
.animate({textShadowBlur:1}, {duration: 1000});
This is described in more detail here: http://usefulthink.com/2010-12/animating-text-shadow-using-jquery
Some other approaches can be found here: http://forum.jquery.com/topic/let-s-animate-text-shadow
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With