<div id = "container" style = "overflow:hidden; height:650px; width:794px;position:relative;background-color:transparent;">

<div id = "home" style = "margin-top:5px; position: relative; height:650px; width:794px;background-image: url(images/finestra.png);background-color: transparent;" >Home
</div>

<div id = "div1" style = "position: relative;height:650px;width:794px; background-image: url(images/finestra.png);background-color: transparent; " >Persone
</div>
</div>


Il codice è praticamente questo, in realtà i div non sono sovrapposti ma sono uno sotto l'altro credo,però nascosti tramite l'overflow:hidden del div cointainer. Non riuscivo a sovrapporli.

var home = new Fx.Slide('home', {duration: 500});
var div1 = new Fx.Slide('div1', {duration: 500});

previousDiv = home;
div1.hide();

$('homeLink').addEvent('click', function(e){
e.stop();
previousDiv.slideOut().chain(function(){home.slide In()});
previousDiv = home;
});

$('div1Link').addEvent('click', function(e){
e.stop();
previousDiv.slideOut().chain(function(){div1.slide In()});
previousDiv = persone;
});


dove previousDiv è una variabile globale, tutto funziona bene se lascio terminare le animazioni
Grazie tante