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