动画效果文字阴影，以淡入淡出

我想动画文字阴影，以淡入淡出使用片断这里分享：动画效果文字阴影，以淡入淡出

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

动画效果文字阴影，以淡入淡出

回答

相关问题