Comment faire "sortir" une page avant de charger la suivante ?

Votre code ici...Bonjour,

J'ai un petit soucis avec la mise en place d'animation sur un site web.
J'aimerai mettre en place des transitions entre l'affichage des pages. En cliquant sur un élément du menu, j'aimerai que la page en cours "sorte" par la gauche et que la page demandée "entre" par le droite.

Je suis arrivée à faire entrer la page par la droite, mais je n'arrive pas a faire sortir la précédente...
Quelqu'un à une idée?

Voici mon code pour l'affichage par la droite:

HTLM : <div id="byRight"></div>
CSS : 
#byRight
{
    background-color:black;
    opacity: 0.8;
    width: 75%;
    position: relative;
    min-height: 400px;
}
SCRIPT:
var currentElt;
// Fonction arrivée des pages par la droite
var byRight = function(element)
{
    var startLeft = $( document ).width()+"px";
    $(currentElt).hide();
    currentElt = element;
    $(element).css('left', startLeft);
    $(element).show();
    $(element).animate({left: 30}, 
                        1000, 
                        function(){console.log("complete");
    });
};
$(document).ready(function(){
    byRight($("#byRight"));
});

Donc ce code fonctionne pour afficher par la droite la page demandée (en cliquant sur l'élément du menu), mais je n'arrive pas à trouver pour faire sortir par la gauche la page précédente....

Merci par avance.

(exemple de page faisant ce que je cherche : http://fr.wix.com/website-template/view/html/774?originUrl=400 )