javascript - JSを使用してGoogleの+1ローリングアニメーションを作成するにはどうすればよいですか？

Question

Google+の投稿の下にある+1ボタンをクリックすると、右側のカウンターが増加しますが、古い走行距離計のように、ローリングアニメーションで増加します。

Javascriptを使用してこのような効果を作成するにはどうすればよいですか？

Answer 1

わかりました、私は解決策を提供しました。基本的に、最初の番号の下に新しい番号を追加します。それらの両方をアニメーション化します。最初の番号を削除します。2番目の数値を正しい位置に設定します。

$(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);

});