How can I chaining jQuery animate function?

Question

I have two divisions and want to chain their animate function. But I have some logic in the first animate function callback to update the value and display it into the first division & it is working perfectly. The problem is when the animation of the first division is finished, the second division doesn't start. I've passed the second div animate function in the first's callback, nothing is happened.

jQuery code:

$('#jq').animate({marginTop:-250+'px',height:250+'px'},2000,'easeOutBack',function(e){

                var counter = 0;
                var height = $(this).height();
                counter+=height/50;
                $('#jq-rating').text(counter);
                //$(noid).append(counter);
            $('#wordpress').animate({marginTop:-250+'px',height:250+'px'},2000,'easeOutBack',function(e){

                var counter = 0;
                var height = $(this).height();
                counter+=height/50;
                $('#wp-rating').text(counter);
                //$(noid).append(counter);

       });


       });

My JSFiddle code

Answer 1

It's working, but you are not able to see because both the divs are overlapping to each other.

add this css:

#wordpress{
    margin-left:60px
}

updated jsfiddle: http://jsfiddle.net/ashishanexpert/LSE8w/13/