javascript - 通过递增和递减来动画数字

Question

我想在一些 div 值中做一些数字动画，问题是动画每次都从 0 开始，但我没有'想要这个，我希望它从以前的值开始。

示例:如果我输入 10，动画从 0 开始并转到 10。如果我随后将 10 更改为 8，我希望动画从 10 变为 8 而不是从0 到 8 再次。基本上，它应该比之前输入的值递增或递减!

其他人认为，如果我输入一些 float ，例如0.10，它显示 1，我希望它显示准确的值。

谢谢

JSfiddle Demo

/*numbers values*/
$('.num').bind('change paste keyup', function() {
  var v1 = $(this).val();
  $('.price').html(v1);
  animatePrince();
});


/*numbers animation*/
function animatePrince() {
  $('.price').each(function() {
    $(this).prop('Counter', $(this).val()).animate({
      Counter: jQuery(this).text()
    }, {
      duration: 1000,
      easing: 'swing',
      step: function(now) {
        jQuery(this).text(Math.ceil(now));
      }
    });
  });
}

.s1 {
  display: block;
}

.s2 {
  display: block;
  margin-bottom: 25px;
}

.num {
  display: block;
  margin-bottom: 30px;
  border: 1px solid #333;
  padding: 20px;
}

.price {
  border: 1px solid #222;
  padding: 10px 30px;
  padding: 20px 90px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="s1">Input</span>
<input class="num" type="float" value="1">
<span class="s2">Result</span>
<span class="price"></span>

Answer 1

我建议您将 jQuery 部分更新为下面提到的代码:

function isFloat(n){
    return Number(n) === n && n % 1 !== 0;
}

function isInt(n){
    return Number(n) === n && n % 1 === 0;
}

/*numbers values*/
$('.num').bind('change paste keyup', function(){
    var value = $(this).val();
  if(isInt(parseFloat(value)))
  {
    animatePrinceInt(parseInt(value));
  }
  else {
    animatePrinceFloat(parseFloat(value));
  }
});

/*numbers animation*/
function animatePrinceFloat(value) {
$('.price').val(value);

$({countNum1: $('.price').text()})
  .animate({countNum1: value }, {
  duration: 3000,
  easing:'linear',
  step: function() {
    var nn= this.countNum1;
    $('.price').text(parseFloat(nn).toFixed(2));
  },
  complete: function() {
    var nn= this.countNum1;
    $('.price').text(parseFloat(nn).toFixed(2));
  }
});

}

/*numbers animation*/
function animatePrinceInt(value) {
$('.price').val(value);

$({countNum: $('.price').text()})
  .animate({countNum: value}, {
  duration: 3000,
  easing:'linear',
  step: function() {
    var nn= this.countNum;
    $('.price').text(Math.floor(nn));
  },
  complete: function() {
    var nn= this.countNum;
    $('.price').text(Math.floor(nn));
  }
});

}

请更新duration 的值。我已经用它作为3000看动画了。