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() ?

Solution 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/

Solution 2

After looking around for a while and realizing that pretty much all solutions out there are for older versions of JQuery I gave up and wrote these functions that mostly do the trick for a 500ms fade in or fade out:

    function AddShadow(ControlID)
    {
        for (i = 0; i < 11; i++)
        {
            setTimeout('$("#' + ControlID + '").css("text-shadow", "0 0 ' + i + 'px White");', i * 50);
        }
    }

    function RemoveShadow(ControlID)
    {
        for (i = 0; i < 11; i++)
        {
            setTimeout('$("#' + ControlID + '").css("text-shadow", "0 0 ' + (10 - i) + 'px White");', i * 50);
        }
    }

Then you just implement it with a JQuery hover handler like this:

$('.class').hover(function () {AddShadow($(this).attr('id'))}, function () {RemoveShadow($(this).attr('id'))};

The only thing I don't like about them is that if you hover over the object quickly it will flicker as it alternates between the two functions, but at least it always leaves them in a final state of being un-faded.

My implementation wasn't that critical so I didn't go any further, but this could theoretically be overcome by adding a flag property to the object that sets whatever the latest action is, and then have the function check the flag each time it performs a step.

Other reasons it's not ideal:

• It is not very intuitive to change the timing or level since you have to mess with both the loop and the multiplier
• It only does linear steps
• It's probably not a very efficient way of doing it.
• Any control you want to use these functions for has to have an ID or it won't work.

But on the bright side, it should work with every JQuery version and it's stable.

Comments

[sirmdawg]

Little do you know, but that is basically the exact effect I was looking for :P. A slide and blur ;)

[sirmdawg]

Is it possible to use this for "opacity" as well?

[Rich Bradshaw]

You can use it for almost every property: w3.org/TR/css3-transitions/#animatable-properties-