[jQuery] Problem with animation queue

[ad]

Hi there,
I want to fire up a bunch of animations on a single click in a strict
order. Unfortunately it doesn't work every time.


Here is my code:


        $("#title02").click(
                function () {  // the first 3 events should occur together, NOT 
one
after another
                        $('#pic0').attr("src", '/images/pic3.jpg');
                        $("#moreInfoContainer").animate({opacity: 0.0}, 500 );
                        $("#pic1").animate({opacity: 0.0}, 1200,

                                function() {    // this function shouldn't 
start bevore ALL THREE
events before have finished. the next three should occur together
again
                                        
$("#moreInfoContainer").css("height",150);
                                        $("#moreInfoText").html("some text");
                                        $('#pic1').attr("src", 
'/images/bild3.jpg').load(

                                        function() {
                                                $('#pic1').animate({opacity: 
1.0}, 500,

                                                function() {
                                                        
$("#moreInfoContainer").animate({opacity: 0.85}, 800);
                                                });
                                        });
                                });
                });

sometimes it works, sometimes soem animations like $
("#moreInfoContainer").animate({opacity: 0.0}, 500 ); (the second one)
occur after almost everything else. How do I get a strict order, so
that some events occur together, and other functions are hold until
everything from before have ended?

I really hope you get my point. Sorry fpr my bad english though ;)

thanks in advance
andy