jquery problem with animate function

I animate a div with jquery. You can see my animation here. On the bottom of the page you cl开发者_如何学Pythonick on the call me button. Now you see a animation that i make with jquery. http://www.mikevierwind.nl/test/

Now my animation going wrong. I used this jquery code for the animation.

nieuwsbrief_formulier_open = true;
            $(this).parent('li').addClass('actief');
            $("#formulier-callme").animate( { width:"375px" }, 1000 )
                .animate( { height:"270px" }, 1000 )

But the animation going wrong. Now he animate on the top the first animation. But i want that he animate on the bottom the first animate.

How can i make that. Thanks for the help!

No worries! You are just chaining together animation functions that should instead be callbacks within the previous animation:

nieuwsbrief_formulier_open = true;
        $(this).parent('li').addClass('actief');
        $("#formulier-callme").animate( { height:"270px" }, 1000, function(){
            $(this).animate( { width:"375px" }, 1000 );
        });

You can also get more information in this thread about jQuery animations