Activer hierarchiquement les fonctions animate

**MrAl1985** · 31/05/2010, 23h07

Salut,
je sais le titre a l'air compliqué mais en fait mon problème est tout simple je pense:

J'ai 3 div associer a 3 événements.
ce que je veux c'est que l'utilisateur ne puisse pas cliquer sur le div 2 ni le div 3 tant que le 1 na pas était cliquer.
J' ai penser a .animate('disable') mais le problème est que la fonction n'est pas du tout exécutée.

voici mon code, j'espère avoir était clair dans mes explications

html:

Code :

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

1
2
3
4
5
 
<div id="right" class="block">Charge moi sur la remorque</div>
<div id="right1" class="block1">Charge moi sur la remorque</div>
<div id="right2" class="block2">Charge moi sur la remorque</div>
<img  class="animation_truck" src="empty_truck.png" alt="camion animation" />

js:

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
 
$("#right").click(function(){
$(".block").animate({ "top": "+=220px"}, {
			    		complete:function(){
						$(".block").stop().animate({"top": "+=0px"});
						  $("#power").animate( { width:"50px" }, 1500);
						}
					});
				});
 
$("#right1").click(function(){
$(".block1").animate({ "top": "+=220px"}, {	
			    		complete:function(){
						$(".block1").stop().animate({"top": "+=0px"});
						$("#power").animate( { width:"250px" }, 1500);
						return false;
						}
					});
				});
 
$("#right2").click(function(){
$(".block2").animate({ "top": "+=220px"}, {	
			    		complete:function(){
						$(".block2").stop().animate({"top": "+=0px"});
						$("#power").animate( { width:"450px" }, 1500);
						return false;
						}
					});
				});

**SpaceFrog** · 01/06/2010, 09h17

rajoute un flag boolean et teste le pour lancer ou non l'animation ?

**MrAl1985** · 01/06/2010, 15h21

Salut SpaceFrog et merci pour ta reponse.
seulement je ne vois pas concretement ce que tu veux entendre par boolean ?

tu me suggere d,utiliser la fonction : val() != "" ?

**SpaceFrog** · 01/06/2010, 16h22

je te suggère d'attribuer un flagboolean a l'objet lorsque tu l'as animé ...

**MrAl1985** · 01/06/2010, 19h17

peux tu me donner un exemple ?

**SpaceFrog** · 01/06/2010, 19h56

clicked étant le flag boolean ...

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
<script type='text/javascript'>
$(document).ready( function(){
	$("#foo").click(function(){
	                           $(this).attr('clicked',true);
	                           $(this).css({'background-color':'red'})
	                           })
	$("#bar").click(function(){
	                           if (!$('#foo').attr('clicked')){alert("cliquez d'abord un")}
	                           else{
	                           	$(this).css({'background-color':'green'})
	                            $(this).attr('clicked',true);
 
	                           	}
	                           })
   $("#toc").click(function(){
	                           if (!$('#bar').attr('clicked')){alert("cliquez d'abord "+($('#foo').attr('clicked')?"deux":"un") )}
	                           else{
	                           	$(this).css({'background-color':'blue'})
	                            $(this).attr('clicked',true);
 
	                           	}
	                           })
 
 
});
</script>
<title>Nouvelle page 1</title>
</head>
<body>
<div id="foo">un
</div>
<div id='bar'>
deux
</div>
<div id='toc'>
trois
</div>
 
</body>
</html>

ici je pointe avec les selecteur des id directement, mais on peut imaginer le faire avec les next ou eq etc ...

**MrAl1985** · 01/06/2010, 23h17

Genial j'ai pu m'en sortir grace a ta solution!
merci beaucoup pour ton exemple

voici le code sait on jamais si des debutants jquery passe par la:

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
 
$("#right").click(function(){
							$(this).attr('clicked',true);
							$(".block").animate({ "top": "+=135px"}, {
							complete:function(){
							$(".block").stop().animate({"top": "+=0px"});
							$("#power").animate( { width:"240px" }, 1500);
							}
							});
						});
 
$("#right1").click(function(){
						$(this).attr('clicked',true);
						if (!$('#right').attr('clicked')){alert("cliquez d'abord un")}
	                    else{
						$(".block1").animate({ "top": "+=135px"}, {	
			    		complete:function(){
						$(".block1").stop().animate({"top": "+=0px"});
						$("#power").animate( { width:"100px" }, 1500);
						return false;
						}
						});
						};
					});
 
$("#right2").click(function(){
						$(this).attr('clicked',true);
						if (!$('#right1').attr('clicked')){alert("cliquez d'abord "+($('#right').attr('clicked')?"deux":"un") )}
	                    else{	
						$(".block2").animate({ "top": "+=135px"}, {
			    		complete:function(){
						$(".block2").stop().animate({"top": "+=0px"});
						$("#power").animate( { width:"0px" }, 1500);
						return false;
						}
						});
						};
					});

Activer hierarchiquement les fonctions animate

jQuery

Discussions similaires

Partager

Partager