计数器动画到一个计算值

Counter animation to a calculated value

本文关键字：一个 计算 动画 计数器      更新时间：2023-09-26

我需要我的计数器动画动画一个值动态计算的复选框所选择的span。这些值计算得很好，但是它们不动。http://jsfiddle.net/dbtj93kL/

 $('input[type="checkbox"]').change(function() {
   var total_span = 0;
   $('input[type="checkbox"]').each(function() {
     if ($(this).is(':checked')) {
       total_span += parseInt($(this).prop('value'));
     }
   });
   $("#usertotal").html(total_span);
 });
 jQuery({
   Counter: 0
 }).animate({
   Counter: $('.Single').text()
 }, {
   duration: 1000,
   step: function() {
     $('.Single').text(Math.ceil(this.Counter));
   }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" value="100" onclick="test(this);">1</input>
<input type="checkbox" value="200" onclick="test(this);">2</input>
<input type="checkbox" value="300" onclick="test(this);">3</input>
<input type="checkbox" value="400" onclick="test(this);">4</input>
<br />
<span id="usertotal" class="Single"> </span>

您需要在框被选中时执行动画，而不是像您那样在页面加载时执行动画:

 $('input[type="checkbox"]').change(function () {
     var total_span = 0;
     $('input[type="checkbox"]').each(function () {
         total_span += this.checked && +this.value;
     });
     $({counter: +$('#usertotal').text()}).animate({counter: total_span},{
         duration: 500,
         step: function () {
             $('#usertotal').text(Math.round(this.counter));
         }
     });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" value="1">1</input>
<input type="checkbox" value="2">2</input>
<input type="checkbox" value="3">3</input>
<input type="checkbox" value="4">4</input>
<br />
<span id="usertotal"></span>

相关文章：