[script.aculo.us] BlindUp et BlindDown se bloquent

BlindUp et BlindDown se bloquent

Bonjour,

Ma page est composée de deux DIV :
- Div 1, toujours visible
- Div 2, div caché lors du chargement de la page.

Grâce aux effets Effect.BlindUp et Effect.BlindDown de ScriptAculous, j'ai pu faire en sorte que lorsque on passe la souris sur Div1, Div2 s'affiche avec un petit effet. Et quand on enlève la souris de sur Div1, Div2 disparait.

Ceci marche sauf que j'ai un bug. Si je m'amuse à mettre la souris sur Div1 et de l'enlever très rapidement (pendant que div2 apparait), mon animation se bloque... (je suis obligé de recharger la page pour que cela remarche)

Voici un lien de démo: http://triskelios.free.fr/test

Avez-vous des idées pour résoudre mon problème ?
Merci d'avance

Voici le code de la page :
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 33 <html> <head> <title>Essai</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="js/lib/prototype.js" type="text/javascript"></script> <script src="js/src/scriptaculous.js" type="text/javascript"></script> <script type="text/javascript"> function cache(element) { Effect.BlindUp(element); return false; } function montre(element) { Effect.BlindDown(element); return false; } </script> </head> <body> <div id="madiv1" onMouseOver="montre('madiv2');" onMouseOut="cache('madiv2');" style="background:#ffcccc; width:100px; height:100px; font-size: 24pt;">1</div> <div id="madiv2" style="background:#ffcccc; width:100px; height:100px; font-size: 24pt; display: none;">2</div> </body> </html>

Essaye avec new :

Code:

1
2
3
4
5
6
7
8
function cache(element){
	new Effect.BlindUp(element); 
	return false;
}
function montre(element){
	new Effect.BlindDown(element); 
	return false;
}

Merci pour votre réponse.

Mais toujours le même bug :cry:

Alors rajoute aussi :

Code:

1
2
3
4
5
6
7
8
function cache(element){
	new Effect.BlindUp(element, {queue: 'end'}); 
	return false;
}
function montre(element){
	new Effect.BlindDown(element, {queue: 'end'}); 
	return false;
}

Merci :D

En effet cela règle une bonne partie de mon problème.

J'ai même modifié votre code pour limité le 'queue'
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type="text/javascript"> function cache(element) { new Effect.BlindUp(element, { queue: { position: 'end', scope: 'menuxscope', limit: 2 } }) return false; } function montre(element) { new Effect.BlindDown(element, { queue: { position: 'end', scope: 'menuxscope', limit: 2 } }) return false; } </script>
Il me reste plus qu'un petit bug: Lors de l'appel de la fonction cache(), la fonction BlindUp ne marche que sur l'arrière plan de mon div. C'est à dire, lors de l'appel de cache(div2) :
- L'arrière plan de div2 se cache bien avec l'effet BlindUp
- Ensuite (et seulement après), le contenu de ma div disparait

Essaye peut-être avec l'option: scaleMode: 'content'.

Pareil :(

En fait, je pense que passer par slideUp / slideDown risque de poser moins de problèmes.

Merci beaucoup :)
En effet, cela marche mieux avec "Slide" (voir démo : http://triskelios.free.fr/test)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type="text/javascript"> function cache(element) { new Effect.SlideUp(element, { queue: { position: 'end', scope: element+'menuxscope', limit: 2} , scaleMode: 'content' }) return false; } function montre(element) { new Effect.SlideDown(element, { queue: { position: 'end', scope: element+'menuxscope', limit: 2 } }) return false; } </script>
Après il me restera un tout dernier point à régler: Si je m'amuse à mettre la souris sur Div1 et de l'enlever très rapidement (et ainsi de suite), j'ai une chance sur deux d'avoir le div "visible" si j'ai ma souris en dehors du div...

Oui, c'est à cause de ton limit: 2 !

Vous mettrez quoi alors? :? Car j'ai essayé avec "limit 1" mais ça bug...