我有一个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/
答案 0 :(得分:0)
jquery animate函数用于处理css动画。它使用计时器在两个元素之间进行补间' ,因此根据补间的大小,结果会有所不同。
这种缺乏先决条件意味着在使用数字时无法保证准确性。一种解决方案是使用动画函数的complete
属性在完成时应用正确的值。
.animate( properties [, duration ] [, easing ] [, complete ] )
$(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);
}
});
});
});

<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">> Choices 2</a>
</div>
&#13;