Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
804 views
in Technique[技术] by (71.8m points)

css - 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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...