Question

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

如何解决我的问题？

＆＃13;

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
  });
});

＆＃13;

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

＆＃13;

Answer 1

在这里，我能做到最好。诀窍是设置目标元素的number属性，该属性充当下一个动画开始时的种子值。我删除了＆＃34; MAX＆＃34;测试插图。

＆＃13;

$("#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);
   });
});

＆＃13;

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

＆＃13;

Answer 2

如果我理解正确，当您点击5000按钮时，您希望增加add，而点击delete时同样减少，如果这是您想要的话，请参阅下面

＆＃13;

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
  });
});

＆＃13;

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

＆＃13;

onclick后的动画增量/减量数

2 个答案: