Animation a partir d'une image

bonjour,

Je souhaite faire une animation a partir d'une image qui compose 25 images (dans une seule)
Voici l'images : Lien de l'image

et je voudrais faire que toutes les images forme une animation sur 1s 750 ms

J'ai fait un truc en javascript qui vas bien trop vite, j'ai l'impression de passer de la première image a la dernière d'un coup. et moi je voudrais que 1s 750 ms a 2 seconde max se passe entre la première et la dernière image d'une même image.

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
 
<div id="magiName" style="width: 64px; height: 64px; display: inline-block; background: url('Images/sorts_animate/3_25.png') no-repeat; position:absolute; background-position: left top; z-index:1000;" ></div>
 
$(function()
{			
	$("#magiName").on('click', function()
	{	
		$(this).css("background-position", "-64px top");
		$(this).css("background-position", "-128px top");
		$(this).css("background-position", "-192px top");
		$(this).css("background-position", "-256px top");
		$(this).css("background-position", "left -64px");
		$(this).css("background-position", "-64px -64px");
		$(this).css("background-position", "-128px -64px");
		$(this).css("background-position", "-192px -64px");
		$(this).css("background-position", "-256px -64px");
		$(this).css("background-position", "left -128px");
		$(this).css("background-position", "-64px -128px");
		$(this).css("background-position", "-128px -128px");
		$(this).css("background-position", "-192px -128px");
		$(this).css("background-position", "-256px -128px");
		$(this).css("background-position", "left -192px");
		$(this).css("background-position", "-64px -192px");
		$(this).css("background-position", "-128px -192px");
		$(this).css("background-position", "-192px -192px");
		$(this).css("background-position", "-256px -192px");
		$(this).css("background-position", "left -256px");
		$(this).css("background-position", "-64px -256px");
		$(this).css("background-position", "-128px -256px");
		$(this).css("background-position", "-192px -256px");
		$(this).css("background-position", "-256px -256px");					
	});
});

J'ai aussi essayer de faire comme ça, mais la ça marche carrément pas ? pourquoi ?

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
$(function()
{			
	$("#magiName").on('click', function()
	{		
		$(this).animate({"background-position": "left top"}, { duration : 500 } );
		$(this).animate({"background-position": "-64px top"}, { duration : 500 } );
		$(this).animate({"background-position": "-128px top"}, { duration : 500 } );
		$(this).animate({"background-position": "-192px top"}, { duration : 500 } );
		$(this).animate({"background-position": "-256px top"}, { duration : 500 } );
		$(this).animate({"background-position": "left -64px"}, { duration : 500 } );
		$(this).animate({"background-position": "-64px -64px"}, { duration : 500 } );
		$(this).animate({"background-position": "-128px -64px"}, { duration : 500 } );
		$(this).animate({"background-position": "-192px -64px"}, { duration : 500 } );
		$(this).animate({"background-position": "-256px -64px"}, { duration : 500 } );
		$(this).animate({"background-position": "left -128px"}, { duration : 500 } );
		$(this).animate({"background-position": "-64px -128px"}, { duration : 500 } );
		$(this).animate({"background-position": "-128px -128px"}, { duration : 500 } );
		$(this).animate({"background-position": "-192px -128px"}, { duration : 500 } );
		$(this).animate({"background-position": "-256px -128px"}, { duration : 500 } );
		$(this).animate({"background-position": "left -192px"}, { duration : 500 } );
		$(this).animate({"background-position": "-64px -192px"}, { duration : 500 } );
		$(this).animate({"background-position": "-128px -192px"}, { duration : 500 } );
		$(this).animate({"background-position": "-192px -192px"}, { duration : 500 } );
		$(this).animate({"background-position": "-256px -192px"}, { duration : 500 } );
		$(this).animate({"background-position": "left -256px"}, { duration : 500 } );
		$(this).animate({"background-position": "-64px -256px"}, { duration : 500 } );
		$(this).animate({"background-position": "-128px -256px"}, { duration : 500 } );
		$(this).animate({"background-position": "-192px -256px"}, { duration : 500 } );
		$(this).animate({"background-position": "-256px -256px"}, { duration : 500 } );					
	});
});

Pouvez vous m'aider.

Merci d'avance

merci de poste les questio JQuery dans le forum JQuery

il te faut faire appel à la fonction javascript setTimeout ou setInterval qui te permet d''exécuter une fonction au bout d'un certain temps.

http://www.w3schools.com/js/js_timing.asp

je ne sais pas si JQuery propose quelque chose.
A+JYT

Merci.

Je réaliser ça avec setTimeout comme ceci et ça fonctionne nickel.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var curS = 0;		
		$("#magiName").on('click', function() {					
			timer();
		});
		function timer()
		{
            var bgP = new Array("left top", "-64px top","-128px top","-192px top","-256px top",
								"left -64px", "-64px -64px", "-128px -64px", "-192px -64px", "-256px -64px",
								"left -128px", "-64px -128px", "-128px -128px", "-192px -128px", "-256px -128px",
								"left -192px", "-64px -192px", "-128px -192px", "-192px -192px", "-256px -192px",
								"left -256px", "-64px -256px", "-128px -256px", "-192px -256px", "-256px -256px");			
            if (curS <= (bgP.length - 1))
			{
				document.getElementById("magiName").style.backgroundPosition = bgP[curS];
            }       
			curS++;
			if(curS != (bgP.length - 1))
				setTimeout(timer,24);
        }

Bonjour,
il eut mieux valu faire une image horizontale ou verticale pour n'avoir à jouer que sur un paramètre, top ou left.

Tant qu'a utiliser jQuery, il existe .each() qui pourrait être utilisé ici.