Arreter et reprendre une suite d'animations

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:

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.:D