FX.slide Effetto tendina

[arkus]

Buon giorno, sono alle prese con mootools, aggiungo un effetto slide a dei div sovrapposti con una serie di link che si occupano di far visualizzare i div.
L'effetto che vorrei dare è:
il div visibile scompare con uno slideOut() e successivamente appare il div richiesto con uno slideIn(), il problema è che se chiamo

divVisibile.slideOut()
divRichiesto.slideIn()

gli effetti praticamente si sovrappongono, come si dovebbe fare per far partire l'effetto slideIn solo dopo che l'effetto slideOut è terminato?
Grazie

[artorius]

devi usare il Chain

http://mootools.net/docs/core/Class/Class.Extras

[arkus]

Ti ringrazio per la risposta,
ho già provato a fare previousDiv.slideOut().chain(currentDiv.slideIn()) ;
ma dà sempre un'effetto di sovrapposizione, magari sbaglio altro

[artorius]

beh, perché devi passare al chain una funzione non un istruzione:

previousDiv.slideOut().chain(function(){currentDiv .slideIn()});

[arkus]

Ecco cosa non andava, potrà sembrare una cosa semplice ma ci ho perso molto tempo, cercavo il problema altrove.

Grazie mille Artorius

[arkus]

è sorto un problema, gli effetti si alternano bene adesso se gli lascio il tempo di terminare completamente, però se prima che l'animazione finisca clicco su un'altro link che si occupa di mostrare un'altro div il tutto va in tilt, poi non funzionano più bene gli slide.
Dovrei far in modo che finchè l'animazione corrente non sia finita il click su un'altro link non faccia partire una nuova animazione slide, evitando così che vada in tilt.
E' fattibile come cosa?

[artorius]

Beh, teoricamente, se fai partire effetti su più div in contemporanea non ci dovrebbero essere problemi. È possibile che ci sia qualche errore nel modo in cui si referenziano gli oggetti Fx, oppure qualcosa nella struttura HTML che manda in palla l'effetto.

Non hai la pagina visibile, che provo a darci un'occhiata.

In alternativa, come crei le istanze degli Fx sui div?

[arkus]

<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

[bionicoz]

prova ad aggiungere wait:false nelle opzioni degli oggetti Fx.Slide così:

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

Comunque non mi convince per niente quel codice...

[arkus]

grazie anche a te bionicoz, con il wait funziona molto meglio(forse è solo una sensazione), ma ogni tanto va in tilt, ma proprio cliccando veloce tra i link
Il wait che funzione ha?
Sono alle prime armi, che miglioria si potrebbe fare?