Eleganter Seitenübergang-Effekt mit AJAX

Hier nun die inoffizielle Fortsetzung zu "Mit AJAX HTML nachladen"Kürzlich hatte ich die Aufgabe, eine Seite etwas zu pimpen, wie man so schön sagt. Es war so ein typischer Fall von Galerie zum Durchklicken. Die Kundin wollte da etwas mehr Pep drin haben. Gut - meine JavaScript-Kenntnisse sind nicht die Besten, die Bezahlung dafür aber auch nicht, also hatte ich eine gute Ausrede für einen einfachen Effekt. Ich hatte also in etwa folgende Struktur:

<div id="ajaxreplace">
<div id="bodywrap">
 <div id="content">Lorem ipsum laberrhabarber</div>
 <div id="pfeile">
  <a href="0.html"><img="img/links.gif" border="0"/></a>
  <a href="2.html"><img="img/rechts.gif" border="0"/></a>
 </div>
</div>
</div>

Die Inhalte sollen ausblenden (herausfaden, fadeOut), neu geladen und wieder eingeblendet (hereingefadet, fadeIn) werden. Das ließ sich recht einfach mit jQuery lösen:

function ajaxfx(url){
$('#loading').css('background','url(img/ajax-loader.gif) no-repeat center center;');
$('#ajaxreplace').fadeOut(1000, function(){
// callback fadeOut()
$(this).load(url +' #bodywrap', function(){
//  callback load()
$(this).fadeIn(1000, function(){
 // callback fadeIn()
 renewlinks();
 $('#loading').css('background','none');
 //return false;
});
});
});
};

function renewlinks(){
$("#pfeile a").unbind();
bindlinks();
}

function bindlinks(){
$("#pfeile a").unbind();
$("#pfeile a").one("click", function(e){
var link = $(this).attr("href");
ajaxfx(link);
return false;
});
}


$(document).ready(function(){
bindlinks();
});

Klar soweit?
Also: ich habe Pfeilgrafiken zum Durchblättern der Galerie (#pfeile). Auf deren Links wird per one() (Alternativ: bind() )eine Funktion aufgesteckt, die als Parameter das Linkziel - man muss ja wissen, was da zu laden ist - bekommt. Ein Klick auf die Pfeile ruft also die Funktion "ajaxfx(url)" auf. Diese lässt zunächst in einem Element mit der ID "loading" eine als CSS-Hintergrund eingebundene Ladegrafik anzeigen (standardmäßig hat #loading keinen Hintergrund).

Das HTML-Gerüst besteht aus einem Container mit der ID "ajaxreplace". Alles, was darin ist, wird ersetzt. Wir faden also nun als nächstes den Container #ajaxreplace über die fadeOut()-Funktion aus. Als Callbackfunktion geben wir fadeOut() eine neue Funktion mit. Diese steht da jetzt inline. Über die load()-Funktion holen wir nun per AJAX einen Container mit der ID "bodywrap" von der Seite, die mit der Pfeilgrafik verlinkt war (url wurde ja als Parameter übergeben). #bodywrap ist der große Container, der nur noch von #ajaxreplace umschlossen wird.

Jetzt können wir in der Callback-Funktion von load() weitermachen und #ajaxreplace wieder einblenden. Anschließend löschen wir auch die Ladegrafik.
Das war alles.

Falls sich jetzt jemand wundert, was ich da mit den Pfeilen bzw. den Funktionen renewlinks() und bindlinks() angestellt habe: das hat sich beim Programmieren so ergeben. Die Pfeilgrafiken sind bei mir auch in #ajaxreplace bzw. dort in #bodywrap enthalten. Wenn ich die neu lade, dann muss ich die wieder neu initialisieren. Sonst kam es beim Testen schon einmal vor, dass der Übergangseffekt nur beim ersten Mal funktionierte. Beim nächsten Klick wurde die komplette Seite geladen, und dann funktionierte es wieder einmal. Also abwechselnd.

Die oben präsentierte Lösung funktionierte im realen Fall jedenfalls. Falls Ihr Verbesserungsvorschläge oder Fehlermeldungen habt, dann hinterlasst bitte einen Kommentar.