javascript - 如何使用 JS 制作 Google 的 +1 滚动动画？

Question

当您在 Google+ 上点击帖子下方的 +1 按钮时，右侧的计数器会增加，但它会通过滚动动画来增加，有点像旧的里程表：

如何使用 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);

});