如何使用 Jquery 为数字设置动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5411343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to animate numbers using Jquery
提问by dpsdce
I am trying to animate a say $233 to $250 or decreasing from 250 to 233 ,i dont want to replace 233 by 250 instead i want a counter kind of effect and at the time of scrolling numbers zoom effect is also required. i am new to Jquery any help would be highly appreciated.
我正在尝试将 233 美元变为 250 美元或从 250 减少到 233 进行动画处理，我不想用 250 替换 233 而是我想要一种计数器效果，并且在滚动数字时也需要缩放效果。我是 Jquery 的新手，任何帮助将不胜感激。
回答by Matt Ball
HTML
HTML
<button id="start">Start</button>
<button id="reset">Reset</button>
<input id="counter" value="233"/>
JavaScript
JavaScript
$(function ()
{
var $start = $('#start'),
start = $start.get(0),
$reset = $('#reset'),
reset = $reset.get(0),
$counter = $('#counter'),
startVal = $counter.text(),
currentVal = startVal,
endVal = 250,
prefix = '$',
fontSize = $counter.css('font-size');
$start.click(function ()
{
this.disabled = true;
var i = setInterval(function ()
{
if (currentVal === endVal)
{
clearInterval(i);
reset.disabled = false;
$counter.animate({fontSize: fontSize});
}
else
{
currentVal++;
$counter.text(prefix+currentVal).animate({fontSize: '+=1'}, 100);
}
}, 100);
});
$reset.click(function ()
{
$counter.text(prefix + startVal);
this.disabled = true;
start.disabled = false;
}).click();
});
回答by The Whiz of Oz
Googled this snippet and it looks pretty awesome and compact:
用谷歌搜索这个片段，它看起来非常棒和紧凑：
// Animate the element's value from 0% to 110%:
jQuery({someValue: 0}).animate({someValue: 110}, {
duration: 1000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('#el').text(Math.ceil(this.someValue) + "%");
}
});
回答by jeremy
@Denis. The second answer has some problem,I change the code as follows:
@丹尼斯。第二个答案有问题，我把代码改成如下：
// Animate the element's value from 0% to 110%:
jQuery({someValue: 0}).animate({someValue: 110}, {
duration: 1000,
easing:'swing', // can be anything
step: function(now) { // called on every step
// Update the element's text with rounded-up value:
$('#el').text(Math.ceil(now) + "%");
}
});
This will avoid the precision question.
这将避免精度问题。
回答by The Muffin Man
The counter is easy, however It's not very clear how you want the effect to look like(give us a link to an example). Regardless the effect would probably be unpractical to do in jQuery.
计数器很简单，但是您不太清楚您希望效果如何（给我们一个示例链接）。无论如何，在 jQuery 中实现这种效果可能是不切实际的。
I would recommend something like raphael js
我会推荐像raphael js这样的东西
Have a look at the examples, they are very nice.
看看这些例子，它们非常好。
回答by Ken Redler
Here's a fun way to do it with a sort of slot machine effect.
这是一种有趣的方式，可以通过某种老虎机效果来实现。
Assuming this simple HTML:
假设这个简单的 HTML：
<span id="foo">123</span> <!--- number to change --->
<a href="#" id="go">Go!</a> <!--- start the slot machine --->
Then:
然后：
var changeto = 456;
function slotmachine(id) {
var thisid = '#' + id;
var $obj = $(thisid);
$obj.css('opacity', '.3');
var original = $obj.text();
var spin = function() {
return Math.floor(Math.random() * 10);
};
var spinning = setInterval(function() {
$obj.text(function() {
var result = '';
for (var i = 0; i < original.length; i++) {
result += spin().toString();
}
return result;
});
}, 50);
var done = setTimeout(function() {
clearInterval(spinning);
$obj.text(changeto).css('opacity', '1');
}, 1000);
}
$('#go').click(function() {
slotmachine('foo');
});
Having the digits "resolve" one by one, movie-codebreaking-style, is left as an exercise.
让数字一个一个地“解析”，电影密码破解风格，留作练习。
Example: http://jsfiddle.net/redler/tkG2H/
回答by yckart
$.fn.increment = function (from, to, duration, easing, complete) {
var params = $.speed(duration, easing, complete);
return this.each(function(){
var self = this;
params.step = function(now) {
self.innerText = now << 0;
};
$({number: from}).animate({number: to}, params);
});
};
$('#count').increment(0, 1337);
阅读更多：http: //www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/
Or without jQuery:
或者没有 jQuery：
function increment(elem, from, to, duration) {
var interval = setInterval(function(){
if (from >= to) clearInterval(interval);
elem.innerText = from++;
}, duration);
};
increment(document.getElementById("count"), 13, 37, 100);
回答by skunkwerk
I'd recommend using the odometer javascript plugin for this: http://github.hubspot.com/odometer/
我建议为此使用里程表 javascript 插件：http: //github.hubspot.com/odometer/
回答by Billy Moon
Untested - but should work along these lines
未经测试 - 但应该按照这些路线工作
create the HTML like this:
像这样创建 HTML：
<div>earn $<span id='counter'>233</span> without working hard</div>
and jQuery like this:
和 jQuery 这样的：
function increment(){
$('#counter').text(parseFloat($('#counter').text())+1)
if(parseFloat($('#counter').text()) < 250){ setTimeout(increment,100) }
}
increment()
