使用 jQuery 对 text-shadow 元素进行动画处理答案

【问题标题】：Animating elements of text-shadow with jQuery使用 jQuery 对 text-shadow 元素进行动画处理
【发布时间】：2010-02-09 05:15:33
【问题描述】：

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

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

【问题讨论】：

标签： jquery css

【解决方案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

【讨论】：

有什么方法可以修改它以允许您指定要模糊的颜色吗？我是扩展 jQuery 和其他东西的新手。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我发现真正有效的唯一方法是创建一个与<a> 具有相同文本的<span>，并使用绝对定位、负边距和.fadeIn()/.fadeOut() 或不透明动画覆盖它。但即使这样也充其量是有问题的，因为所有元素的动态扩展和覆盖看起来最好是“关闭”。

【讨论】：

【解决方案4】：

为什么不使用 addClass('shadow') 并在元素上添加过渡？

当然这在旧的 IE 中是行不通的……

【讨论】：

【解决方案5】：

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

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

会给你财产

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

【讨论】：