动画文本阴影淡入和淡出答案

【问题标题】：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 在拥有或不拥有特定类的各种状态之间进行动画处理。

标签： javascript jquery animation jquery-animate

【解决方案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 只是为了演示问题，我不会在生产中使用它。