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.
J'ai aussi essayer de faire comme ça, mais la ça marche carrément pas ? pourquoi ?
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 <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"); }); });
Pouvez vous m'aider.
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 $(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 } ); }); });
Merci d'avance
Partager