如何使用JS创建Google的+1滚动动画？

Question

当你点击+1按钮的下方在Google+上，右边的增量计数器后，但它有一个滚动的动画这样做，有点像老里程表：

如何创建这样的一个效果，使用JavaScript？

Answer 1

好吧，我已经提供了解决方案。基本上我在第一个下面添加一个新号码。动画他们两个。删除第一个数字。将第二个数字设置到正确的位置。

$(function() { 
    $(document).on('click', 'button', function (evt) { 
     var num, element, self; 
     self = $(".number").first(); 
     num = parseInt($(".number:last").text()); 
     num = num + 1; 
     element = '<div class="number">' + num.toString() + '</div>'; 
     $(".container").append(element); 
     $(".number").animate(
      { top: "-=20" }, 
      150, 
      function() { 
       self.remove(); 
       $(".number").css("top", "0px"); 
      } 
     ); 
    }); 
}); 

这是解决http://jsfiddle.net/Dtwigs/KrpGp/

Answer 2

这里的东西，让你开始：

http://jsfiddle.net/XKmJf/

.wrapper { 

    position:relative; 

} 

.wrapper .number-1 { 

position:absolute; 
top:0; 
left:0; 
    background-color:white; 

} 


<div class="wrapper"> 
    <a class="number-1">1</a> 
    <a class="number-2">2</a> 
</div> 


$(document).ready(function(){ 

    $(".wrapper .number-1").animate({top:"-100px"}, 1000); 

});