✔ Animationen nacheinander ausführen

[D34DL1NES]

Hallo,

Ich möchte gerne 2 Animationen an unterschiedlichen Objekten durchführen. Dies funktioniert auch wunderbar aber die Animationen werden gleichzeitig gestartet, Ich möchte gerne das die eine Animation gestarted wird und wenn sie abgeschlossen ist die nächste startet.

LeftButton.click(function()
    {

        if ((TextIndex) == Slides)
        {
            $("#Text" + TextIndex).stop().animate({ "opacity": 0 }, TextSpeed);
	    $("#Title" + TextIndex).stop().animate({ "opacity": 0 }, TextSpeed);
	    $("#Image" + TextIndex).stop().animate({ "opacity": 0 }, ImageSpeed);
            TextIndex = 1;
            $("#Text" + TextIndex).stop().animate({ "opacity": 1 }, TextSpeed);
	    $("#Title" + TextIndex).stop().animate({ "opacity": 1 }, TextSpeed);
	    $("#Image" + TextIndex).stop().animate({ "opacity": 1 }, ImageSpeed);
        }

es sollen erst Titel, Text und Image ausblenden( ich habe bewusst nicht fadeIn/Out genommen) und dann der nächste Satz dieser 3 Elemente eingeblendet werden, aber erst wenn das ausblenden fertig ist.

 

[Quaese]

Hi,

du kannst animate eine Callback-Funktion übergeben, die aufgerufen wird, nachdem die Animation beendet ist.

So könntest du zum Beispiel das Einblenden der zweiten Gruppe in der Callback-Funktion zum Element #Image+TextIndex starten.

$("#Text" + TextIndex).stop().animate({ "opacity": 0 }, TextSpeed);
$("#Title" + TextIndex).stop().animate({ "opacity": 0 }, TextSpeed);
$("#Image" + TextIndex).stop().animate({ "opacity": 0 }, ImageSpeed, function(){
  TextIndex = 1;
  $("#Text" + TextIndex).stop().animate({ "opacity": 1 }, TextSpeed);
  $("#Title" + TextIndex).stop().animate({ "opacity": 1 }, TextSpeed);
  $("#Image" + TextIndex).stop().animate({ "opacity": 1 }, ImageSpeed);
});

Ciao
Quaese

 

[D34DL1NES]

Danke, ich hatte die Callback funktion ganz vergessen.