trafex

Ich beschäftige mich derzeit sehr viel mit AJAX. Dazu verwende ich zur Vereinfachung der Programmierung die von den mootools gelieferte AJAX-Bibliothek, welche vollständig auf Javascript aufsetzt.
Ziel sollte es sein dem Benutzer eine Oberfläche zu bieten, auf der er mehrere Boxen mit Inhalt dargestellt bekommt. Jede Box enspricht einem Favoriten. Durch klicken auf einen Schalter in der Box sollte die Box aus den Favoriten entfernt werden. Um jetzt ein Neuladen zu vermeiden setze ich wie schon besagt AJAX ein. Das eigentliche entfernen stellt kein Problem dar, nur wollte ich dazu die Box ausblenden lassen: erst ausblenden (opacity) und danach die Breite verkleinern (width), so dass die Box nicht mehr angezeigt wird.
Bei den mootools sind die einzelnen Schritte recht schnell erledigt:

Ausblenden:

var ausblenden = new Fx.Style('id-der-box', 'opacity', {duration: 500});  // Effekt initialisieren
ausblenden.start(1,0); // Ausblenden starten (von 1 (sichtbar) bis 0 (unsichtbar))

Größe ändern:

var resizebox = new Fx.Style('id-der-box', 'width', {duration: 500});  // Effekt initialisieren
resizebox.start(0); // Größe ändern starten, vom aktuellen Wert bis 0

Danach blende ich die Box noch komplett aus:

$('id-der-box').setStyle('display','none');

Jetzt stand ich allerdings vor dem Problem, das die mootools nicht mit der Ausführung des einen Effekts warten bevor der nächste gestartet wurde. Die Folge war, dass das komplette Ausblenden sofort zugeschlagen hat ohne die beiden anderen Effekte abzuwarten. Nach langem erfolglosen suchen in der Dokumentation und im Forum von den mootools habe ich mich dazu entschlossen die onComplete-Funktion zu nutzen. Durch die Verschachtelung sicher kein eleganter Weg, aber es Funktioniert erst einmal:

var ausblenden = new Fx.Style('id-der-box', 'opacity', {
duration: 500,
onComplete: function () {
// hier jetzt den 2. Effekt initialisieren
var resizebox = new Fx.Style('id-der-box', 'width', {duration: 500});
// .. und starten ..
resizebox.start(0);
}
});  // Effekt initialisieren
ausblenden.start(1,0); // Ausblenden starten (von 1 (sichtbar) bis 0 (unsichtbar))

Das ganze habe ich in einem Demo zusammengefasst.