javascript - 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

使用...フェードインする前に要素fadeIn()が必要です..これを試してくださいhide()

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

Answer 2

これは非常に単純な数値カウンターです。

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

Answer 3

これを試すことができます：

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