使用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工作...