jQuery und Reihenfolge der Animationen

[ad]

Hallo,

ich habe ein kl. Problemmit jQuery und der Reihenfolge der Animationen. Manchmal geht es, manchmal nicht.

Hier der code:

[code lang=javascript][
        $("#title02").click(
                function () {  // die ersten drei Events sollten GLEICHZEITIG stattfinden, nciht nacheinander
                        $('#pic0').attr("src", '/images/pic3.jpg');
                        $("#moreInfoContainer").animate({opacity: 0.0}, 500 );
                        $("#pic1").animate({opacity: 0.0}, 1200,

function() {    // erst wenn ALLE DREI vorherigen Events durch sind, soll es hier weitergehen. Die nächsten drei sollen dann wieder gleichzeitig ablaufen
                                        $("#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);
                                                });
                                        });
                                });
                });
/code]

Ich denke das Problem ist, dass z.B. die zweite Funktion in Zeile 7 aufgerufen wird sobald pic1 ausgeblendet ist und nicht auf die Animation von moreInfoContainer wartet. Wie bekomme ich das hin, das 1.) die untereinander geschriebenen Events gleichzeitig ablaufen und 2. die als nächstes aufgerufene Funktion erst dann loslegt, wenn alls vorherigen Animationen durch sind?

Hoffe es kann hier jem. helfen. Das wäre super, danke :)
andi

[LX]

Hallo, andi!

Die Lösung besteht in der Option "queue:false" - der Call sieht dann so aus:

.animate({ opacity: 0 }, { queue:false, duration:500 });

Dadurch wird die Animation egal bei welchem Timing asynchron ausgeführt.

Gruß, LX

[ad]

Hallo

Die Lösung besteht in der Option "queue:false" - der Call sieht dann so aus:

.animate({ opacity: 0 }, { queue:false, duration:500 });

Leider klappt es immer noch nicht so ganz. Am Anfang schaut alles immer sehr ordentlich aus, aber sobald man ein wenig rumgeklickt hat und keine großen Pausen zw. 2 Klicks lässt, läuft's irgendwann schief. So als ob der moreInfoContaienr eben nicht mehr hinterherkommt.

Mit queue:false hatte ich eh schon gespielt, aber wie gesagt nur mit dem selben Ergebnis :-/

An was könnte es noch liegen?
Danke vielemals - das nervt mich jetzt schon fast den ganzen Tag :-/