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。

问题的解答：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 - ＆gt;使用setInterval堆叠调用

setInterval not 等待第一个调用完成，直到它发出下一个调用，因此调用可能会叠加。

动画文字阴影淡入淡出

1 个答案: