Question

我想知道是否有任何方法，使用jQuery，动画文本阴影的属性，如大小或颜色。

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

Answer 1

对于这个答案可能会有点迟到，但无论如何它都是......

我通过实现一个像这个

动画的“虚拟”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 2

作为使用jQuery的替代方法，您可以使用UIZE JavaScript Framework的强大动画功能。在以下示例中查看同时为多个文本阴影设置动画的不同元素......

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

Answer 3

我发现真正有用的唯一方法是创建一个<span>，其文本与<a>相同，并使用绝对定位，负边距和.fadeIn（）/覆盖它.fadeOut（）或不透明动画。但即便如此，因为所有动态扩展的元素和覆盖层看起来都是“关闭”的，所以最好是充满了瑕疵。

Answer 4

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

当然这在旧IE中不起作用......

Answer 5

使用javascript解析CSS属性并创建一个新属性

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

会给你属性

使用javascript的字符串函数来处理它：http://www.w3schools.com/jsref/jsref_obj_string.asp 和parsefloat（'2px'）只会给你2

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

5 个答案: