使用jQuery设置文本阴影的动画元素

Question

我想知道是否有任何方法可以使用jQuery为文本阴影设置动画属性（如大小或颜色）。

令人讨厌的是，没有单独的属性，如text-shadow-color，而不是只能以组合形式提供的语句。

Answer 1

使用JavaScript来解析CSS属性，并创建一个新的

var myelement_shadow = $('myelement').css('text-shadow'); 

会给你的财产

使用JavaScript的字符串函数与它的工作：http://www.w3schools.com/jsref/jsref_obj_string.asp 和parsefloat（“2像素”）将会给你提供2

Answer 2

作为使用jQuery的替代方法，您可以使用UIZE JavaScript框架的强大动画功能。看到多个文本阴影在下面的例子中，同时被动画的不同元素...

http://www.uize.com/examples/hover-fader-text-shadow-animation.html

Answer 3

可能有点晚了这个答案，但在这里它是无论如何...

我解决它通过实施一个“虚拟”的CSS属性来进行动画这样

$.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}); 

这在这里更详细地描述： http://usefulthink.com/2010-12/animating-text-shadow-using-jquery

其他一些方法可以在这里找到： http://forum.jquery.com/topic/let-s-animate-text-shadow

Answer 4

我发现的唯一途径，真正奋力用相同的文字作为<a>创建<span>并覆盖它使用绝对定位，切缘阴性，和.fadeIn （）/。fadeOut（）或不透明动画。但即使如此，由于所有的元素都在不断扩大，而且叠加层看起来有些“偏离”，所以最好也是这样。

Answer 5

为什么不使用addClass（'shadow'）并在元素上添加转换？

当然，这并不在旧版IE工作...