点击后的动画增量/递减数

Question

我在玩jquery.animateNumber库：https://github.com/aishek/jquery-animateNumber，因为我看到的是轻快的，你可以在里面得到一个很好的效果。不幸的是，我有一件事有问题。我需要将div中的值减少5000，每次点击(动画数字)，并减少5000，也通过动画的数字在中间。就增量而言，我无法处理变量分解。

我该如何解决我的问题？

​

value = parseInt($("#test").html()) * 2;
$("#add").on("click", function() {

  if (value < 50000) {
    $("#test").animateNumber({
      number: value
    });
    value += 5000;
  } else {
    $("#test").html("MAX");
  }

});

$("#delete").on("click", function() {
  $("#test").animateNumber({
    number: value
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.js"></script>


<button type="button" id="add">Add</button>
<button type="button" id="delete">Delete</button>
<div id="test">5000</div>

​

Answer 1

这是我能为你做的最好的。诀窍是设置目标元素的number属性，它充当下一个动画开始时的种子值。我去掉了"MAX“测试的插图。

​

$("#add").on("click", function() {
    var nextNumber = parseInt($('#test').text(), 10) + 5000;
    $("#test").animateNumber({
      number: nextNumber,
    },
   'normal',
    function() {
        $('#test').prop('number', nextNumber);
      }
    );
});

$("#delete").on("click", function() {
    var nextNumber = parseInt($('#test').text(), 10) - 5000;
  $("#test").animateNumber({
    number: nextNumber
  }, 
  'normal',
   function() {
      $('#test').prop('number', nextNumber);
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.js"></script>


<button type="button" id="add">Add</button>
<button type="button" id="delete">Delete</button>

<div id="test">0</div>

​

Answer 2

如果我正确地理解了您，您希望在单击“5000”按钮时通过add进行增量，而单击“delete”时也会类似地减少，请参见下面的内容，如果这是您想要的

​

value = parseInt($("#test").html());

$("#add").on("click", function() {
  console.log(value);
  if (value < 50000) {

    value += 5000;
    $("#test").animateNumber({
      number: value
    });
  } else {
    $("#test").html("MAX");
  }

});

$("#delete").on("click", function() {
  value -= 5000;
  $("#test").animateNumber({
    number: value
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.js"></script>





<button type="button" id="add">Add</button>
<button type="button" id="delete">Delete</button>
<div id="test">5000</div>

​