使用jQuery为文本阴影的元素添加动画效果

Question

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

很烦人的是，没有像text-shadow-color这样的单独属性，而只能以组合形式使用该语句。

- Bryce Roney

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

- Martin Schuhfuß

---

有没有办法修改这个代码，让你可以指定要模糊的颜色？我对扩展jQuery之类的东西还很陌生。 - Adam Rezich

Answer 2

作为使用 jQuery 的替代方案，您可以使用 UIZE JavaScript 框架强大的动画能力。在以下示例中，可以看到多个文本阴影元素同时进行动画处理...

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

- Chris van Rensburg

Answer 3

我发现唯一真正有效的方法是创建一个与标签相同文本的，并使用绝对定位、负边距以及.fadeIn()/.fadeOut()或不透明度动画来覆盖它。但即使如此，在所有动态扩展元素的情况下，这种方法仍然存在一些小问题，而且覆盖效果最好也只能算勉强。

- Robert McMahan

Answer 4

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

当然，在旧版 IE 中无法实现该效果...

- akmur

Answer 5

使用JavaScript解析CSS属性并创建新属性。

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

将会给你这个属性

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

- davidosomething