BlindUp et BlindDown se bloquent

**langevert** · 09/02/2009, 10h19

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 :

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

**Bovino** · 09/02/2009, 10h48

Essaye avec new :

Code :

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

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

**langevert** · 09/02/2009, 10h56

Merci pour votre réponse.

Mais toujours le même bug

**Bovino** · 09/02/2009, 11h01

Alors rajoute aussi :

Code :

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

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

**langevert** · 09/02/2009, 11h33

Merci

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

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

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

**Bovino** · 09/02/2009, 11h39

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

BlindUp et BlindDown se bloquent

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager