動畫效果文字陰影，以淡入淡出

我想動畫文字陰影，以淡入淡出使用片斷這裏分享：動畫效果文字陰影，以淡入淡出

Animating elements of text-shadow with jQuery

我的代碼基本上是：

$.fx.step.textShadowBlur = function(fx) { 
    $(fx.elem).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px white'}); 
}; 

$("#seconds").animate({textShadowBlur:20}, {duration: 300, complete: function() { 
    $("#seconds").animate({textShadowBlur:0}, {duration: 300}); 
}});

問題我遇到的是「淡出」部分似乎不起作用。陰影模糊只增加至20，然後選擇「重置」 0

的jsfiddle問題：http://jsfiddle.net/ANs92/

來源

2012-08-17 Naatan

通過CSS3而不是JS實現效果不明智嗎？ – aliirz 2012-08-17 15:16:55

在某些事件中會觸發此效果，並且基本上涉及2個動畫（生成較高模糊的動畫並隨後生成較低模糊的動畫）。我沒有看到css3如何促進這一點，然後我再也不是100％最新的css3動畫。 – Naatan 2012-08-17 15:23:17

你見過這個嗎？ http://www.alexpeattie.com/projects/animate-textshadow/ – 2012-08-17 15:25:03

您需要存儲你的元素的屬性動畫的屬性的當前狀態。否則，$ .animate會在每次動畫開始時將該屬性設置爲0。而從0到0的動畫將不會生成任何動畫。

這樣它會工作：

$.fx.step.textShadowBlur = function(fx) { 
    $(fx.elem) 
     .prop('textShadowBlur', fx.now) 
     .css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px black'}); 
}; 

setInterval(function() { 
    $("#seconds").animate({textShadowBlur:20}, { 
     duration: 300, 
     complete: function() { 
      $("#seconds").animate({textShadowBlur:0}, {duration: 300}); 
     } 
    }); 
}, 1000);

工作實例： http://jsfiddle.net/ANs92/16/

請注意：您可能會收到使用問題時的setInterval： http://bonsaiden.github.com/JavaScript-Garden/#other.timeouts - >堆疊在使用setInterval

電話setInterval確實不是等待第一個呼叫完成，直到它發出下一個呼叫，所以c所有人都可以堆疊起來。

來源

2012-08-17 23:18:51 LeJared

完美，謝謝LeJared！ setInterval只是爲了演示這個問題，我沒有在生產中使用它。 – Naatan 2012-08-18 20:15:07

動畫效果文字陰影，以淡入淡出

回答

相關問題