Arreter et reprendre une suite d'animations

**s4mk1ng** · 01/05/2011, 09h08

Bonjour,j'ai un petit problème avec jquery.J'ai un code qui exécute plusieurs effets à la suite d'abbord une image avec fadeOut puis quatre images qui s'affichent au fur et à mesure,tout ça marche bien mais je voudrais pouvoir stopper les effets en appuyant sur un bouton mais je ne sais pas comment faire pour reprendre avec un bouton play à l'endroit où j'en étais les solutions que j'ai vu dans l'api étaient de réécrire le code dans le play mais je penses qu'il y a une autre solution...
Voici le code:

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
86
87
88
89
90
91
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
 
  </script>
 <style>
#fire { position: absolute;top: 10em; right: 20em;}
#secu{
position: absolute;
top: 25em;
right:58em;
display: none;
}
#services{
position: absolute;
top: 25em;
right:40em;
display: none;
}
#infogerance{
position: absolute;
top: -25em;
right:22em;
 
}
#cloud{
position: absolute;
top: 25em;
right:-16em;
 
 
}
#ok{
position: absolute;
top: 55em;
right:5em;
}
#stop{
position: absolute;
top: 55em;
right:0em;
}
</style>
 
</head>
<body>
<img id="fire" src="firefox.png" title="Logo" height="500" width="650" align="middle"/>
<img id="secu" src="secu.png" title="Image de la secu" height="150" width="280" align="middle"/>
<img id="services" src="services.jpg" title="Image de services" height="150" width="280" align="middle"/>
<img id="infogerance" src="infogerance.jpg" title="Image d'infogerance" height="150" width="280" align="middle"/>
<img id="cloud" src="cloud.jpg" title="Image de cloud" height="150" width="280" align="middle"/>
<input id="ok" type="button" value="Go"></input>
<input id="stop" type="button" value="Stop"/></p>
</body>
</class>
 
<script type="text/javascript">
$('#fire').click(function(){
	$('#fire').fadeOut(2000);
	$('#secu').delay(1000).show(2000);
 
 
	$("#stop").click(function(){
$("#secu").stop();
	});
		});
 
 
$('#secu').click(function(){
	$('#services').slideDown(2000);
	$("#stop").click(function(){
$("#services").stop();
		});
	});
$('#services').click(function(){
	$('#infogerance').animate({'top':'25em'}, 2000 );
	$("#stop").click(function(){
$("#infogerance").stop();
	});
		});
 
$('#infogerance').click(function(){
	$('#cloud').animate({'left':'59em'}, 2000 );
	$("#stop").click(function(){
$("#cloud").stop();
	});
		});
 
  </script>
</html>

Merci de votre aide.

**danielhagnoul** · 07/05/2011, 11h42

Bonjour

Je ne vois pas comment réaliser la chose.

Suivant les arguments passés à la méthode stop() http://api.jquery.com/stop/, l'animation n'a pas eu lieu ou elle est terminée.

On ne peut pas bloquer l'animation dans un état intermédiaire. On peut seulement relancer l'animation.

Arreter et reprendre une suite d'animations

jQuery

Vue hybride

Discussions similaires

Partager

Partager