CODEWITHSUNDEEP
jquerycss
Bryce Roney
Bryce Roney

Reputation: 113

Animating elements of text-shadow with jQuery

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.

Upvotes: 10

Views: 8223

Answers (5)

akmur
akmur

Reputation: 1635

Why not using addClass('shadow'), and adding a transition on the element?

Of course this doesn't work in old IE...

Upvotes: 0

Robert McMahan
Robert McMahan

Reputation: 15

The only way I found that truly worked was creating a <span> with the same text as the <a> and overlaying it using absolute positioning, negative margins, and .fadeIn()/.fadeOut() or opacity animations. But even that was glitchy at best because of all the on the fly expanding of elements and the overlay was kind of 'off' looking at best.

Upvotes: 1

Martin Schuhfu&#223;
Martin Schuhfu&#223;

Reputation: 6986

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

Upvotes: 10

davidosomething
davidosomething

Reputation: 3437

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

Upvotes: -1

Chris van Rensburg
Chris van Rensburg

Reputation: 11

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

Upvotes: 1

Related Questions