Animowanie text-shadow zanikać i obecnie

Question

Próbuję animowanie text-shadow zanikać i obecnie za pomocą urywek wspólne tutaj:

Animating elements of text-shadow with jQuery

Moje kodu jest zasadniczo:

$.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 polega na tym, że część "znikająca" nie działa. Cień plama po prostu zwiększa się do 20, a następnie „resetuje” 0.

jsfiddle problemu: http://jsfiddle.net/ANs92/

Answer 1

musisz zapisać aktualny stan nieruchomości jesteś animowanie w nieruchomości elementu. W przeciwnym razie $ .animate przyjmie, że właściwość ma wartość 0 przy każdym uruchomieniu animacji. Animacja od 0 do 0 niczego nie animuje.

ten sposób będzie działać:

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

przykład roboczych: http://jsfiddle.net/ANs92/16/

Uwaga: Można uzyskać problemy podczas korzystania setInterval: http://bonsaiden.github.com/JavaScript-Garden/#other.timeouts -> Stertowanie połączeń z setInterval

setInterval ma nie czekać na zakończenie pierwszego połączenia, dopóki nie wywoła następnego połączenia, więc c alls może się kumulować.