Effet SlideDown/SlideUp et navigation

Bonjour,

J'ai 3 contenus différents accessibles via 3 icones cliquables, et je cherche à appliquer un effet SlideDown quand un contenu apparaît et SlideUp quand il disparait (quand on clique sur un des autres liens) avant que le nouveau contenu apparaisse en SlideDown.

Voilà ce que j'ai fait :

le script :

Code:

---

1 2 3 4 5 6 7 8 9

function multi_toggle(to_show){ $$('#content1', '#content2', '#content3').each( function(el) { if(el.style.display != 'none') { Effect.SlideUp(el, {queue:{ position: 'front', scope: 'menu', limit: 2 }}); } }); Effect.SlideDown(to_show, {queue:{ position: 'end', scope: 'menu', limit: 2 }}); }

---

le fichier html (simplifié) :

Code:

---

1 2 3 4 5 6 7 8

<div id="content1" style="display: none">...</div> <div id="content2" style="display: none">...</div> <div id="content3" style="display: none">...</div>   <img onclick="multi_toggle('content1'); return false;" /> <img onclick="multi_toggle('content2'); return false;" /> <img onclick="multi_toggle('content2'); return false;" />

---

Cela fonctionne bien sauf si on clique sur une autre icone alors que l'animation précédente n'est pas finie. Ca plante un peu toute l'animation.

J'ai beau chercher je vois pas comment m'en sortir simplement.

Une idée ?

Merci pour vos réponses.

Salut,

Plutot que de jouer sur le queue, tu ne peux pas variabiliser ton effet et l'annuler s'il existe avant de le re déclarer ?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

var objsEffects = {}; function multi_toggle(to_show){ $$('#content1', '#content2', '#content3').each( function(el) { var elID = el.identify() if(el.style.display != 'none') { if(objsEffects[elID]) { objsEffects[elID].cancel(); } objsEffects[elID] = new Effect.SlideUp(el, {queue:{ position: 'front', scope: 'menu', limit: 2 }}); } }); }

---

tout d'abord merci pour la réponse.

J'ai toujours des effets gênants : par exemple ça me coupe une partie du contenu des div qui apparaissent ou encore les animations deviennent moins fluides.

Je me demande si je ne devrais pas utiliser un element.Observe pour détecter le click et un stopObserving pendant le déroulement de l'animation.

Seulement comment paramétrer le stopObserving pour que le click remarche à le fin de l'animation.

Tu as bien supprimer les parametres queue ? (je les avais laissés dans mon exemple)

Sinon je me demande si les impressions de fluidité ne sont pas liés à la transition sinusoidale : avec le parametre transition en linéair ca donne quoi ?

Code:

---

new Effect.SlideUp(el, {transition : Effect.Transitions.linear});

---

Pour être sûr, est-ce que ce code te semble bon, notamment la partie SlideDown ?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var objsEffects = {}; function multi_toggle(to_show){ $$('#content1', '#content2', '#content3').each( function(el) { var elID = el.identify() if(el.style.display != 'none') { if(objsEffects[elID]) { objsEffects[elID].cancel(); } objsEffects[elID] = new Effect.SlideUp(el); } });   Effect.SlideDown(to_show); }

---

J'ai pas mis la transition ici mais je vais tester.

Attention à bien inscrire ton événement SlideDown dans ton objsEffects et à le tester et l'annuler avant si besoin... + tester que l'élément à ouvrir n'est pas déjà ouvert...

Après c'est du détail mais j'aurai fait ca :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

var objsEffects = {}; function multi_toggle(to_show){ if($(to_show).visible()) { // si to_show est déjà visible, on a fini. return; } // je préfère passer par $ que $$ dans ce cas... $('content1', 'content2', 'content3').each( function(el) { var elID = el.identify(); // si ce n'est pas celui qu'on veut ouvrir if(elID != to_show) { // s'il est visible if(el.visible()) { // si un effet est en cours... if(objsEffects[elID]) { // on le stoppe objsEffects[elID].cancel(); } // on le ferme objsEffects[elID] = new Effect.SlideUp(el); } } }); // si on a un effet en cours sur to_show... if(objsEffects[to_show]) { // on le stoppe objsEffects[elID].cancel(); } // on déclenche l'effet en le sauvegardant objsEffects[to_show] = new Effect.SlideDown(to_show); }

---

réponse tardive pour cause de we prolongé !

J'ai toujours des comportements "erratiques".

J'y suis arrivé en passant par observe et stopObserving, mais merci quand même car tes suggestions m'ont donner des idées et permis d'avancer.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var item = [ ['box_blue', 'content1'], ['box_green', 'content2'], ['box_orange', 'content3'], ];   function load(){ item.each(function(e){ Event.observe(e[0], 'click', function(event){ if($(e[1]).style.display != 'none') { return; } $$('#content1', '#content2', '#content3').each( function(el) { if(el.style.display != 'none') { new Effect.SlideUp(el, { queue: 'front'}); } }); for (i=0; i<3; i++){Event.stopObserving(item[i][0]);} new Effect.SlideDown(e[1], {afterFinish:load, queue: 'end'}); }) }) }

---

Ça marche nickel sur Firefox et comme de juste j'ai un petit souci sur IE, avec la disparition de mon contenu une fois que les effets sont terminés. D'autant plus bizarre que ce sont essentiellement des contenus dans des tableaux qui disparaissent.

Problème résolu sur IE qui apparemment n'aime pas "position:relative" dans mes contenus à afficher en slide.