5

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

使用 jQuery 为 text-shadow 元素设置动画

我的代码本质上是：

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

4

1 回答 1

4

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

setInterval 在发出下一个调用之前不会等待第一个调用完成，因此调用可能会堆积。

于 2012-08-17T23:18:51.233 回答