Jquery.stop () callback

I am trying to call an animation as a callback to another animation. The fact is that I want the second animation to work if the first is completed, and from what I read, since the .stop () function should work. However, in the code I compiled, the second animation works even if the first is not complete.

Here is the code:

$(document).ready(function(){
    var angle = 0;

    function arrowRotate() {
        angle +=180;
        $('#arrow img').stop().rotate({
            animateTo: angle,
        }, 100);
    };

    function ToggleOpen(heightValue) {
        $('#information').stop().animate({
            height : heightValue,
        }, 1500, 'easeOutExpo', function(){
            arrowRotate();
        })
    };

    $('#information_container').hover(function(){
        ToggleOpen(500);

    }, function(){
        ToggleOpen(0);
    });

    $('#arrow img').click(function(){
        ToggleOpen(0);
    });

});

I use this third-party plugin: http://code.google.com/p/jqueryrotate/

Here's the current implementation: http://hopeandpurpose.org

So basically what I am trying to accomplish is raising the height of the div on the hover, and as soon as this completes the image, it rotates. The problem is that the image still rotates even if the height animation is not complete and the div comes to life to 0.

, , , , , , , arrowRotate(). if, arrowRotate(), ?