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

你可以试试这个：

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

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