lire en boucle une animation en jquery+setInterval.

mouktar · 24/06/2011, 15h41

Salut les amis,

Voila, j'ai un problème avec une animation que je dois crée en jquery pour mon stage.J'ai beau essayé d'utiliser la fonction setInterval pour lire en boucle la fonction mais je ne sais pas pourquoi,la lecture se fait une fois apres plus rien.
Je vous joins le code,s'il y a quelqu'un qui peut m'aider

merci.

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
<script type="text/javascript" language="javascript">
 
			$(document).ready(function(){
			 	 animation();
				 setInterval("animation();",12000);
			});
 
			function animation(){
				$('#div_0').animate({
				"margin-top": 50,
				"font-size":35
				},1000, function() {
			  		$('#div_0').delay(1500).animate({"margin-left":600,"margin-top":-400},1500);		
				});
				$('#div_1').delay(3000).animate({
					"margin-left": 50,
					"margin-top":50,
					"font-size":35
					},1000, function() {
						$('#div_1').delay(1500).fadeOut();
					});
				$('#div_2').delay(6000).animate({
				"margin-left": 100,
				"font-size":35
				},1000, function() {
			  		$('#div_2').delay(1500).animate({"margin-top":-250},1500);
				});
			$('#div_3').delay(9000).animate({
				"margin-top": 50,
				"font-size":35
				},1000, function() {
			  		$('#div_3').delay(1500).fadeOut();
				});
				$('#div_4').delay(12000).animate({
				"margin-top": 50,
				"font-size":35
				},1000, function() {
			  		$('#div_4').delay(1500).fadeOut();
				});
			}
 
</script>
 
<style type="text/css">
	body{font-family:Arial, Helvetica, sans-serif;}
	#conteneur{position:relative;width:600px;margin-left:auto;margin-right:auto;height:400px;background-color:#000000;overflow:hidden;}
	#logo{position:absolute;top:315px;left:286px;}
	#div_0 {position:absolute;top:50px;margin-top:-400px;margin-left:50px;color:#ff6600;font-size:35PX;}
	#div_1 {position:absolute;top:100px;margin-left:-400px;margin-top:400px;color:#ff6600;font-size:35PX;}
	#div_2 {position:absolute;top:100px;margin-left:-500px;color:#ff6600;font-size:35PX;}	
	#div_3 {position:absolute;top:100px;margin-top:400px;margin-left:100px;color:#ff6600;font-size:35PX;}
	#div_4 {position:absolute;top:100px;margin-top:400px;margin-left:100px;color:#ff6600;font-size:35PX;}
	h2{color:#fff;margin:5px;font-size:32px;}
	span{display:block;}
</style>
 
 
</head>
 
 
<body>
<div id="conteneur">
 
<div id="div_0">
	<h2>accueil</h2>
	<span> 22000 appels par mois.</span>
 
</div>
<div id="div_1">
	<h2>commande</h2>
	<span> 352 000</span>
</div>
<div id="div_2">
	<h2>facturation</h2>
	<span> 22431 </span>
</div>
<div id="div_3">
	<h2>commande web</h2>
	<span> 44221 opérations.</span>
</div>
<div id="div_4">
	<h2>réclamations</h2>
	<span>32221 réclamations traités.</span>
</div>
</div>

danielhagnoul · 25/06/2011, 10h49

Bonjour

Attention, on passe uniquement le nom de la méthode setInterval(animation, 12000); et pas un texte !

Si la méthode doit recevoir des arguments, on doit enrober l'appel dans une fonction anonyme :

Code :

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

1
2
3
setInterval(function(){
   animation(arg1, arg2);
},12000);

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