scriptaculous effect.move(), décalage

**yourchenko** · 15/07/2009, 21h10

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

**Bovino** · 17/07/2009, 08h29

Salut,
Je pense que le problème vient de code.js.
Ceci dit, il est difficile d'en dire plus étant donné qu'on ne connait pas son contenu.

**yourchenko** · 17/07/2009, 09h36

le voila

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
 
 
function ajax(num)
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
 
    //on appelle le fichier essai.xml
    xhr.open("GET", "contenu/essai.xml", true);
 
	 //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr,num); };
	xhr.send(null);
}
 
function alert_ajax(xhr,num)
{
 
	var docXML= xhr.responseXML;
	var items = docXML.getElementsByTagName("donnee")
 
	document.getElementById("text").innerHTML=items.item(num).firstChild.data;
	if(xhr.readyState ==4){
			if(xhr.status ==200 ){
					document.getElementByID("text").innerHTML=xhr.responseXml;
 
			}else{
					document.getElementById("text").innerHTML="Error: returned status code" +xhr.status+" " +xhr.statusText;
			}
 
	};
	xhr.open("GET", "contenu/essai.xml", true); 
	xhr.send(null); 
}

merci encore !!

**gwyohm** · 18/07/2009, 17h03

Le truc c'est de passer par l'option queue ;
je t'invite à voir la doc car il y a plusieurs façons de les gérer, pour toi, je pense qu'il faut utiliser l'option la plus complete :
tu donnes une position à chaque effet qui peut être 'front' ou 'end', cette option permet de dire si ton effet doit se jouer en premier parmi la file en attente ou en dernier.
tu donnes également un scope qui te permet de définir quel est le scope de ta file. Dans ton cas, tu as un scope par cellule;

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
 
<div class="cellule green">
  <a href="javascript:ajax(3);" 
      class="cellule green" 
      onMouseOver="new Effect.Move(this, { x: -75, y: 0, queue:{position:'end',scope:'greenCell'} }); return false; " 
      onMouseOut="new Effect.Move(this, { x: 75, y: 0, queue:{position:'end',scope:'greenCell'} }); 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, queue:{position:'end',scope:'redCell'}}); return false; " 
       onMouseOut="new Effect.Move(this, { x: 75, y: 0, queue:{position:'end',scope:'redCell'} }); return false;">4eme</a>
</div>

scriptaculous effect.move(), décalage

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager