jquery problem with animate function

Question

Hello.,

I animate a div with jquery. You can see my animation here. On the bottom of the page you click 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!

Answer 1

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