javascript - 动画文本阴影淡入淡出

Question

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

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/

Answer 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 不会等待第一个调用完成，直到发出下一个调用，因此调用可能会堆积起来。