Animazione text-shadow di fade in e out

Question

sto cercando di animare text-shadow a svanire dentro e fuori con il frammento di condiviso qui:

Animating elements of text-shadow with jQuery

Il mio codice è essenzialmente:

$.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 che sto avendo è che la parte "fadeout" non sembra funzionare. Ombra sfocatura aumenta solo a 20 e poi "reset" a 0.

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

Answer 1

È necessario memorizzare lo stato corrente della proprietà si sta animando in una proprietà dell'elemento. Altrimenti $ .animate presupporrà che la proprietà sia 0 ogni volta che inizia l'animazione. E l'animazione da 0 a 0 non animerà nulla.

In questo modo funzionerà:

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

Esempio di lavoro: http://jsfiddle.net/ANs92/16/

Si prega di notare: È possibile ottenere problemi quando si utilizza setInterval: http://bonsaiden.github.com/JavaScript-Garden/#other.timeouts -> Chiamate impilabile con setInterval

setInterval fa non attendi che la prima chiamata venga completata finché non emette la chiamata successiva, quindi c tutti possono accumularsi.