我创建了一个脚本来将数字从零动画化到它的值。
Working
jQuery
$({ Counter: 0 }).animate({
Counter: $('.Single').text()
}, {
duration: 1000,
easing: 'swing',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">150</span>
不工作
我现在想在页面上为每个匹配的类运行脚本几次。
以下是我正在尝试但到目前为止尚未成功的方法:
HTML
<span class="Count">200</span>
<span class="Count">55</span>
JQUERY
$('.Count').each(function () {
jQuery({ Counter: 0 }).animate({ Counter: $(this).text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$(this).text(Math.ceil(this.Counter));
}
});
});
Your this
不引用步骤回调中的元素,而是您希望在函数的开头保留对它的引用(包装在$this
在我的例子中):
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
Update:如果要显示小数,则不要将值四舍五入Math.ceil
例如,您可以四舍五入到小数点后两位value.toFixed(2)
:
step: function () {
$this.text(this.Counter.toFixed(2));
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)