voila, pour mon menu j'avais prévu une animation assez simple :
-lorsque ma souris arrive sur la cellule, la cellule s'étend sur la gauche,
-lorsque ma souris sort de la cellule, la cellule revient à sa position initiale.

Mon problème :
-si la première animation se lance et que ma souris sort de la cellule, l'animation s'arrête et démarre l'autre. cependant comme la 1ere n'est pas allez au bout, l'animation antagoniste ira plus loin que la place initiale. ceci tendant à faire des décalages affreux!!

objectif :
-forcer la première animation à se finir, avant de commencer la suivante.

voici mes codes :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xml:lang="fr">
 
<head>
 
  <title>Utilisation du CSS</title>
 
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
  <link href="css/tupu.css" media="screen" rel="stylesheet" type"text/css" />
 
  <script type="text/javascript" src="js/lib/prototype.js"></script>
 
  <script type="text/javascript" src="js/src/scriptaculous.js"></script>
 
  <script type="text/javascript" src="script/code.js"></script>
 
 
 
 
 
 
 
</head>
 
 
 
 
 
<body>
 
<div id="bandeau">
 
 
 
 
 
</div>
 
<div class="centrer-bloc">
 
	<div class="menu">
 
		<div class="cellule orange"><a href="javascript:ajax(1)" onclick="$('text').hide(5.0); $('text').appear();" >1ere</a></div>
 
		<div class="cellule blue"><a href="javascript:ajax(2);" onMouseOver="$('.cellule').animate({ width:"90%" }, 1000);"  onclick="$('text').hide(5.0); $('text').appear();">2eme</a></div>
 
		<div class="cellule green"><a href="javascript:ajax(3);" class="cellule green" onMouseOver="new Effect.Move(this, { x: -75, y: 0 }); return false; " onMouseOut="new Effect.Move(this, { x: 75, y: 0 }); return false; " onclick="$('text').hide(5.0); $('text').appear();" >3eme</a></div>
 
		<div class="cellule red"><a href="javascript:ajax(4);" id="move" onMouseOver="new Effect.Move(this, {x: -300, y: 50, mode: 'absolute', transition : Effect.Transitions.sinoidal}); return false; " onMouseOut="new Effect.Move(this, { x: 75, y: 0 }); return false;">4eme</a></div>
 
	</div>
 
 
 
	<div id="is">
 
		<div id="text" style="width:500px; height:300px;">
 
			<p>tupuducultupuduucultupuducultuuduucult<br>upuduculuduucultupuduculuduucu<br>ltupuduculuduucultupuduculpuducultuul=</p>
 
			<p>en faite c'est toi qui pue</p>et ta mere elle sent?et ta mere elle sent?et ta mere elle sent?et ta mere elle sent?et ta mere elle sent?et ta mere elle sent?et ta mere elle sent?et ta mere elle sent?et ta mere elle sent?et ta mere elle sent?et ta mere elle sent?
 
			et ta mere elle sent?et ta mere elle sent?et ta mere elle sent?et ta mere elle sent?et ta mere elle sent
 
			StandaCreation : Création de sites Internet est une société de création de sites web.f ?
 
		</div>
 
	</div>
 
</div>
 
 
 
 
 
 
 
</body>
 
</html>

Voila j'attends vos propositions avec impatience !!

merci beaucoup