CODEWITHSUNDEEP
javascriptjquery
awendt
awendt

Reputation: 13673

How to create Google's +1 rolling animation using JS?

When you click the +1 button below a post on Google+, the counter on the right increments, but it does so with a rolling animation, kinda like old odometers:

Observe the rolling animation on the right

How can I create such an effect, using Javascript?

Upvotes: 1

Views: 660

Answers (2)

Danwilliger
Danwilliger

Reputation: 1241

Ok, I've provided a solution. Basically I'm appending a new number below the first one. Animating them both up. Removing the first number. Setting the second number to the right position.

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

This is the solution http://jsfiddle.net/Dtwigs/KrpGp/

Upvotes: 4

Dylan Cross
Dylan Cross

Reputation: 5986

Here's something to get you started:

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

});

Upvotes: 2

Related Questions