在动画

Question

我有一个jQuery计数器，每次检查单选按钮时都会更新，并将其值添加到等式中。到现在为止还挺好。但是，只要检查具有高值的单选按钮，计数器动画就无法显示正确的数字。它将显示例如999 998而不是1 000 000等等。这是脚本：

$(window).load(function(){
  $('input[type="radio"]').change(function () {
    var total_span = 0;
    $('input[type="radio"]').each(function () {
     total_span += this.checked && +this.value; 
    });
    $({counter: +$('#total').text()}).animate({counter: total_span},{
     duration: 1000,
     easing: 'swing',
     step: function () {
       $('#total').text(Math.floor(this.counter));
       $('#total-2').text(Math.floor(this.counter));
     }
   }); 
  });   
}); 

你们中的任何人都有解决这个问题的方法吗？如果有人能帮助我，我将非常感激：）

编辑：您可以在此处查看问题： http://moodboy.se/radiobuttons/

Answer 1

jquery animate函数用于处理css动画。它使用计时器在两个元素之间进行补间＆＃39; ，因此根据补间的大小，结果会有所不同。

这种缺乏先决条件意味着在使用数字时无法保证准确性。一种解决方案是使用动画函数的complete属性在完成时应用正确的值。

.animate( properties [, duration ] [, easing ] [, complete ] )

＆＃13;

＆＃13;

$(window).load(function(){
  $('input[type="radio"]').change(function () {
    var total_span = 0;
    $('input[type="radio"]').each(function () {
     total_span += this.checked && +this.value; 
    });
    $({counter: + $('#total').text()}).animate({counter: total_span},{
     duration: 1000,
     easing: 'swing',
     step: function () {
       $('#total').text(Math.floor(this.counter));
       $('#total-2').text(Math.floor(this.counter));
     },
     complete : function(){
       $('#total').text(total_span);
     }
   }); 
  });   
}); 

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="togglelinks">
  <ul>
    <li><a class="toggle" href="#panel-one">Choices 1</a></li>
    <li><a class="toggle" href="#panel-two">Choices 2</a></li>
    <li><a class="toggle" href="#show-all" id="demo">Results</a></li>
  </ul>
  <span id="total">974996</span>
  <div class="clear"></div>
</div>
<div id="panel-one" class="info-panel">
  <h1>Choices 1</h1>
  <label><input id="1001" name="choices-1" value="1195000" type="radio">1195000</label>
  <label><input id="1002" name="choices-1" value="925000" type="radio">925000</label>
  <label><input id="1003" name="choices-1" value="1275000" type="radio">1275000</label>
  <label><input id="1004" name="choices-1" value="1195000" type="radio">1195000</label>
  <label><input id="1005" name="choices-1" value="1195000" type="radio">1195000</label>
  <label><input id="1006" name="choices-1" value="1295000" type="radio">1295000</label>
  <p>
    <label><input id="2001" name="choices-1" value="1250000" type="radio">1250000</label>
    <label><input id="2002" name="choices-1" value="975000" type="radio">975000</label>
    <label><input id="2003" name="choices-1" value="1295000" type="radio">1295000</label>
    <label><input id="2004" name="choices-1" value="1250000" type="radio">1250000</label>
    <label><input id="2005" name="choices-1" value="1250000" type="radio">1250000</label>
    <label><input id="2006" name="choices-1" value="1345000" type="radio">1345000</label>
  </p>
  <a class="toggle" href="#panel-two">&gt; Choices 2</a>
</div>

＆＃13;

＆＃13;

＆＃13;