如何使用Jquery为数字设置动画
我试图动画说233美元到250美元或从250减少到233，我不想用230替换233而不是我想要一种反击效果，并且在滚动数字时也需要缩放效果。 我是Jquery的新手，任何帮助都将受到高度赞赏。
HTML
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(); });
演示→
谷歌搜索这个片段，它看起来非常棒和紧凑：
// 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) + "%"); } });
小提琴
计数器很简单，但是你想要效果看起来不是很清楚（给我们一个例子的链接）。 无论这种效果在jQuery中可能都是不切实际的。
我会推荐像raphael js这样的东西
看看这些例子，它们非常好看。
这是一种有趣的方式，通过一种老虎机效果来做到这一点。
假设这个简单的HTML：
123 Go!
然后：
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'); });
将数字“逐步解析”，电影代码破解风格，留作练习。
示例： http ： //jsfiddle.net/redler/tkG2H/
@Denis。 第二个答案有一些问题，我更改代码如下：
// 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) + "%"); } });
这将避免精确度问题。
$.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/
或者没有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);
我建议使用里程表javascript插件： http ： //github.hubspot.com/odometer/
未经测试 – 但应该按照这些方针工作
像这样创建HTML：
earn $233 without working hard
和jQuery这样：
function increment(){ $('#counter').text(parseFloat($('#counter').text())+1) if(parseFloat($('#counter').text()) < 250){ setTimeout(increment,100) } } increment()