Animating multiple text-shadows with Jquery

Question

I'm trying to create the effect of a Neon sign that changes color. For that I'm using (only for Chrome, FF, Safari and Opera) 4 text-shadows all with the same color but with different blur sizes. The static effect looks awesome but I can't seem to be able to change its color since jquery UI does not support changing text-shadow color and the only jquery plugin I found explicitly says that it only works to animate one text-shadow...

So I'm hoping that all you JS masterminds have already solved this problem one time and thus can help me out!

I've seen this effect working (in an AWESOME way) here: http://metafizzy.co/

Anyone care to explain me howit can be accomplished? I don't need anything that fancy...

Thanks in advance!

John

Answer 1

I think it can be done with the jQuery function .animate() like this:

$('span#your-neon').animate({
    step : function(now,fx){
         // generate values based on the now parameter (0 < now < 2000)
         // $(this).css('text-shadow','...multiple text-shadows based on the generated values....')
    },
    duration : 2000
})