Javascript 设置文字阴影淡入淡出的动画

我正在尝试使用此处共享的片段设置文本阴影淡入淡出的动画：

我的代码基本上是：

$.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

---

jshiddle of the problem:

您需要将正在制作动画的属性的当前状态存储在元素的属性中。否则，$.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);

工作示例：

请注意：使用setInterval时可能会遇到问题： -->使用setInterval堆叠调用

---

setInterval不会等待第一次调用完成，直到发出下一次调用，因此调用可能会堆积起来。

通过CSS3而不是JS实现效果是否明智？此效果在某些事件中触发，基本上涉及2个动画（动画设置为更高的模糊度，后续动画设置为更低的模糊度）。我不知道css3是如何促进这一点的，但我对css3动画不是100%最新的。你看到了吗？我没有，但这对于我正在尝试做的事情来说太过分了。使用JavaScript添加或删除一个类，并使用

transition

在拥有或没有特定类的各种状态之间设置动画。太好了，谢谢LeJared！setInterval只是为了演示问题，我不在生产中使用它。