jquery - 動的テキストでフェードイン

Question

これが機能しない理由はわかりませんが、次のような数値をロードするタイマーがあります。

 function startTimer(num){
  count = num;
  countdown = setInterval(function(){

     $("#timer p.seconds").text([count]).fadeIn(300);
    count--;
  }, 1000);
 };

$(document).on('click', '.step3-btn', function(e){
    e.preventDefault();
    startTimer(30);
});

<p class="seconds"></p>

最初の番号をゆっくりとフェードインさせたいのですが、そのコードは機能していません。フェードなしで表示されます。

Answer 1

ここでフィドル、http：//jsfiddle.net/pqUYS/

var count = 10,
    next;
(next = function() {
    if ( count > 0 ) {
        $("p.seconds").hide().text(count--).fadeIn(1000, next);
    }
})();

更新されたフィドル

最初の番号でのみフェードします http://jsfiddle.net/pqUYS/3/

Answer 2

最初の数値が上限であるかどうかを確認し、最初に非表示にしてフェードインするだけです。

jsFiddleの例

function startTimer(num) {
     count = num;
     countdown = setInterval(function () {
         if(count==num){$("p.seconds").text([count]).hide().fadeIn(300);}
         else{$("p.seconds").text([count]).fadeIn(300);}         
         count--;
     }, 1000);
 };
startTimer(30);