Animating text-shadow to fade in and out

Question

I'm trying to animate text-shadow to fade in and out using the snippet shared here:

Animating elements of text-shadow 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}); 
}});

Problem I'm having is that the "fadeout" portion doesn't seem to work. Shadow blur just increases to 20 and then "resets" to 0.

jsfiddle of the problem: http://jsfiddle.net/ANs92/

Answer 1

You need to store the current state of the property you're animating in a property of the element. Otherwise $.animate will assume the property to be 0 every time your animation starts. And animating from 0 to 0 will animate nothing.

This way it will work:

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

Working Example: http://jsfiddle.net/ANs92/16/

Please note: You may get problems when using setInterval: http://bonsaiden.github.com/JavaScript-Garden/#other.timeouts --> Stacking Calls with setInterval

setInterval does not wait for the first call to complete until it issues the next call, so calls may stack up.