用jQuery製作動畫數字

Question

我正在創建一個簡單的遊戲，我需要爲聚集的點動畫。

目前我所做的是：

if (selectedWord == item) 
{ 
    gamePoints = gamePoints+5; 
    $(".gameSpanStarImage").html(gamePoints); 
} 

你能告訴我如何創建上的數字動畫效果？我知道我需要使用某種形式的動畫，如：

<div id="button">Click me</div><br> 

<div id="container">Faded in</div> 

<script> 
    $("#container").hide(); 

    $("#button").click(function() {$("#container").fadeIn()}); 
</script> 

但它不應該發生在點擊而是將比分變化時。

Answer 1

你可以試試這個：

if (selectedWord == item) { 
    $({number:gamePoints}).animate({number:gamePoints+5}, {step:function(now,fx){ 
     $(".gameSpanStarImage").html(parseInt(now)); 
    }}) 
} 

Answer 2

使用fadeIn() ...您需要hide()元素衰落之前.. 試試這個

if (selectedWord == item) 
{ 
    gamePoints = gamePoints+5; 
    $(".gameSpanStarImage").hide().html(gamePoints).fadeIn('slow'); 
} 

Answer 3

這裏是一個非常簡單的數字計數器：

$.fn.animatedCounter = function(from, to, speed) { 
    var self = this; 

    function setText(text) { 
    return function(){ self.text(text); }; 
    } 

    for (var i=from; i<=to; i++) { 
    setTimeout(setText(i), i*(speed/to)); 
    } 
}; 

$('div').animatedCounter(1,100,5000); // Count from 1 to 100 in 5 seconds 

演示：http://jsbin.com/ocowab/1/edit