Jquery samen, maar moet niet

Ik ben dus een beginner met Jquery, maar er is iets wat me niet lukt:

http://sander.vanmarijn.nl/jquery

Maar volgens de code zou het dit moeten zijn:

$(document).ready(function(){
  $("button").click(function(){
$(".divje").animate({left:"37%"},"slow"); //Gaat naar rechts
$(".divje").animate({width:"300px"},"slow"); //Wordt groter naar de breedte
$(".divje").animate({height:"120px"},"slow"); //Wordt grote naar de hoogte
$(".divje").animate({fontSize:"100px"},"slow"); //Text wordt groter
//ANDERE DIV
$(".ander").animate({left:"37%"},"slow"); //Gaat naar rechts
$(".ander").animate({width:"300px"},"slow"); //Wordt groter in de breedte
$(".ander").animate({height:"120px"},"slow"); //Wordt groter in de hoogte
$(".ander").animate({fontSize:"100px"},"slow"); //Text wordt groter
//Terug de andere
$(".divje").animate({fontSize:"16px"},"slow"); //Text verkleind terug
$(".divje").animate({height:"20px"},"slow"); //Div wordt weer kleiner
$(".divje").animate({width:"50px"},"slow"); //Div wordt weer kleiner
$(".divje").animate({left:"75%"},"slow"); //Schuift weg
$(".divje").animate({left:"0%"},"slow"); //En weer terug
$(".ander").animate({fontSize:"16px"},"slow"); //zie vorige
$(".ander").animate({height:"20px"},"slow"); //zie
$(".ander").animate({width:"50px"},"slow"); //zie
$(".ander").animate({left:"75%"},"slow"); //zie
$(".ander").animate({left:"0%"},"slow"); // zie
  });
});

Dus eerst zou de div met "Sander" in moeten groter worden dan de text, dan de div met check hetzelfde en dan sluit de div sander en dan sluit de div check.
Je kijkt maar in de code,
maar nu doen ze dit deels samen, maar dat zie je in de link hierboven.

Kunnen jullie me helpen?

Thanks

Je zou moeten werken met extra functies denk ik zo. De animate functie bij jQuery kan een parameter meekrijgen met een functie die uitgevoerd moet worden als hij klaar is.
Ik heb geen idee wat de handigste manier is om dit te doen..

Voorbeeld:

$(".divje").animate({left:"37%"},"slow", function () { alert(klaar met de eerste); } );

Dan zou je dus bij dat alert(klaar met de eerste); de volgende uit kunnen gaan voeren, maar om dat nou allemaal in elkaar te gaan zetten is ook weer niet aan te raden.

Volgens mij is het wel zo dat als je meerdere animates op 1 element zet, hij afwacht tot hij de volgende kan doen. Je zou dus wel die complete function kunnen gebruiken bij $(".divje").animate({fontSize:"100px"},"slow"); //Text wordt groter en daar in de function de rest inzetten tot //Terug de andere, etc..

Als je hierbij hulp nodig hebt zeg je het maar

Ik bekijk dit over een paar dagen, want ik ga bij vrienden slapen. Alvast bedankt

Het gebeurt nu allemaal op dezelfde moment. Dat kan dus niet. Doe iets als dit per div:

$(".divje").animate({left:"37%"},"slow").animate({width:"300px"},"slow").animate({height:"120px"},"slow").animate({fontSize:"100px"},"slow"); //Text wordt groter