动画文本阴影以淡入淡出

Animating text-shadow to fade in and out

本文关键字：淡入 淡出 阴影 文本 动画      更新时间：2023-09-26

我正在尝试使用此处共享的代码片段对文本阴影进行动画处理以淡入淡出：

使用 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/

您需要将

要进行动画处理的属性的当前状态存储在元素的属性中。否则，$.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 不会等待第一个调用完成，直到它发出下一个调用，因此调用可能会堆叠。

相关文章：