animación de texto-a la sombra aparecen y desaparecen

Question

estoy tratando de animar texto-sombra a aparecer y desaparecer con el fragmento compartido aquí:

Animating elements of text-shadow with jQuery

Mi código es esencialmente:

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

Problema que estoy teniendo es que la parte "fadeout" no parece funcionar. desenfoque de la sombra sólo aumenta a 20 y luego "reajusta" a 0.

jsFiddle del problema: http://jsfiddle.net/ANs92/

Answer 1

Es necesario para almacenar el estado actual de la propiedad desea animar en una propiedad del elemento. De lo contrario, $ .animate asumirá que la propiedad sea 0 cada vez que comience la animación. Y animar de 0 a 0 no animará nada.

Esta manera de que funcione:

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

Ejemplo de trabajo: http://jsfiddle.net/ANs92/16/

Tenga en cuenta: Es posible tener problemas al usar setInterval: http://bonsaiden.github.com/JavaScript-Garden/#other.timeouts -> Llamadas de apilamiento con setInterval

setInterval hace no espera a que se complete la primera llamada hasta que emita la siguiente llamada, por lo que c todos pueden apilarse.