Arreter et reprendre une suite d'animations

S@mking · 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.

07/05/2011, 11h42	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	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. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email