动画文本阴影淡入和淡出

Posted 2023-05-08

【中文标题】动画文本阴影淡入和淡出

【英文标题】：Animating text-shadow to fade in and out

【发布时间】：2012-08-14 01:19:31

【问题描述】：

我正在尝试使用此处共享的 sn-p 为 text-shadow 设置动画以淡入和淡出：

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。

问题的答案：http://jsfiddle.net/ANs92/

【问题讨论】：

通过CSS3而不是JS来实现效果会不会很明智？

这个效果在某些事件上触发，基本上涉及2个动画（动画到更高的模糊和随后的动画到更低的模糊）。我不明白 css3 如何促进这一点，那么我又不是 100% 了解 css3 动画。

你见过这个吗？ alexpeattie.com/projects/animate-textshadow

我没有，但这对于我正在尝试做的事情来说太过分了。

使用 javascript 添加或删除类，并使用 transition 在拥有或不拥有特定类的各种状态之间进行动画处理。

【参考方案1】：

您需要将正在制作动画的属性的当前状态存储在元素的属性中。否则 $.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 不会等待第一个调用完成，直到它发出下一个调用，因此调用可能会堆积。

【讨论】：

完美，感谢 LeJared！ setInterval 只是为了演示问题，我不会在生产中使用它。