Geek asks and answers

Text shadow animation for smoothing out

I am trying to animate a text shadow to fade in and out using a common snippet:

Animating text shadow elements with jQuery

My code is essentially:

$.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}); 
}});

The problem I am facing is that the fadeout part is not working. The shadow blur simply increases to 20, and then “resets” to 0.

jsfiddle problems: http://jsfiddle.net/ANs92/

+5
source share
1 answer

You need to save the current state of the property that you are animating in the property of the element. Otherwise, $ .animate will consider the property to be 0 each time the animation starts. A revival from 0 to 0 will not revive anything.

:

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

+3

More articles:


All Articles