對Jquery倒數計時器上的每個數字進行動畫處理

Question

http://jsfiddle.net/GNrUM/

上面的當前jsfiddle顯示倒數2秒。 想象沒有文字，只有數字。 我試圖找出：

a）我應如何將某種動畫集成到js中，以使數字更改大小，顏色和位置，同時對其進行計數（持續時間隨時間變化）。 Css3可以工作，但是我需要它基於javascript，因此它可以在移動設備上的舊瀏覽器上工作。

b）倒計時完成后，其他內容就好像是一個新頁面一樣顯示，但仍在相同的url上。

任何反饋表示贊賞。

編輯：即使是一個很好的提示，也可以幫助我自己解決這個問題。 只是缺乏語法知識，這在js中有些菜鳥。 干杯

Answer 1

使用animate（）函數

var sec = 10
var timer = setInterval(function() {
    $('#hideMsg span').animate({
        opacity: 0.25,
        fontSize: '2em'
    }, 500, function() {
        $('#hideMsg span').css('opacity', 1);
        $('#hideMsg span').css('font-size', '1em');
        $('#hideMsg span').text(sec--);
    })

    if (sec == -1) {
        $('#hideMsg').fadeOut('fast');
        clearInterval(timer);
    }
}, 1000);​

JSFiddle鏈接： http : //jsfiddle.net/GNrUM/412/

Answer 2

我會看類似於該庫的內容： http : //ricostacruz.com/jquery.transit/

可用時將使用CSS3過渡，並進行優美的后備。

關於添加位置，在執行此操作之前：

$('#hideMsg span').text(sec--);

我將執行所需的動畫，並在動畫的完成時執行以上代碼以更新計時器。

Answer 3

http://jsfiddle.net/GNrUM/410/

var sec = 10
var timer = setInterval(function() { 
    var color = sec > 5 ? "red" : "green";
   $('#hideMsg span').text(--sec).css("font-size", 10+sec*2 + "px").css("color", color);
   if (sec == 0) {
      $('#hideMsg').fadeOut('fast');
      clearInterval(timer);
   } 
}, 1000);​

這些值可能不是您想要的，但這為您提供了入門的基本思路。

Answer 4

我過去曾經使用過這個jQuery插件 。 它具有onUpdate和onComplete回調。 您應該能夠重新設置計數器onUpdate樣式，還可以隱藏它並在onComplete加載一些內容。 這對您有意義嗎？

我看到您需要倒數，而不是增加，但是改編該插件應該沒有問題，因為它非常簡單。