Discussion :

[Rivoli]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[gwyohm]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 }});
    }
  });
}

[Rivoli]

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.

[gwyohm]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Rivoli]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[gwyohm]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

[Rivoli]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Rivoli]

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