MINECRAFT首页上的数字跳动更新的效果是怎么做到的？

[xavierskip]

http://www.minecraft.net/
那个有多少玩家注册以及多少玩家玩过这个游戏的数字在变动的时候，
就是跳动的效果具体是怎么实现的？

[est]

javascript setInterval

[zxwind]

跳动是用animate设置css的位置属性实现的，就是下面这个函数

var countTo = function(el, val) {
if (el.text().length != val.length) {
el.text(val);
el.css('width', el.width() + 'px').css('display', 'inline-block');
return false;
}
var digits = el.text().split('');
el.css('width', el.width() + 'px').css('display', 'inline-block');
el.html("");
var offset = new Array();
var digitEles = new Array();
for (i in digits) {
var digit = $("<span></span>").text(digits[i]).appendTo(el);
offset.push(digit.position().left);
digitEles.push(digit);
}
for (i in digitEles) {
digitEles[i].css({
top: 0,
left: offset[i] + "px",
position: 'absolute'
})
}
var newDigits = val.split('');
for (i in newDigits) {
if (newDigits[i] != digits[i]) {
var newDigit = $('<span></span>').text(newDigits[i]).appendTo(el);
newDigit.css({
top: "-10px",
left: offset[i] + "px",
position: 'absolute'
});
newDigit.animate({
top: '+=10',
opacity: 1.0
}, 200), function() {
el.html(val)
};
digitEles[i].animate({
top: '+=10',
opacity: 0.0
}, 200, function(){
$(this).remove()
});
}
}
//$($('.total_users span')[4]).animate({top: '-=15', opacity: 1.0 },500, function(){$(this).remove()});
}

[xavierskip]

@est 谢谢，我去查查。

@zxwind 哦，感谢。