动画文字阴影淡入淡出

Question

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

使用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 --> Stacking Calls with setInterval

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