Animation progressive avec setTimeout

Bonjour
dans mon site je veux faire une animation qui fait agrandire la hauteur d'une image progressivement, donc j'est besoin de setTimeout, voila la fonction :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<script type="text/javascript"> function test() { var i=0; while(i<100) { document.getElementById("img").style.height=i+30; i++; setTimeout("test", 100); } } </script>

---

mais quand j'execute cette fonction l'image s'agrandie d'un seul coup (elle ignore setTimeout("test", 100);)

quelqu'un peut me donner une solution

merci

Bonjour,
essaye avec setInterval() ...

Code:

---

setInterval(function() {test();}, 100);

---

avec

Code:

---

1 2 3 4 5

var i=0; function test() { document.getElementById("img").style.height=i+30+'px'; }

---

A+

Tu commets plusieurs erreurs de conception et de syntaxe.

Code:

---

1 2 3 4

function test() { var i=0; while(i<100)

---

à chaque passage dans la fonction, i est réinitialisé à 0, déclare plutôt i en global !

Code:

---

1 2 3 4

var i=0; function test() { while(i<100)

---

Code:

---

document.getElementById("img").style.height=i+30;

---

le height doit avoir une unité...

Code:

---

document.getElementById("img").style.height=i+30 + 'px';

---

Oups !
Edité pour ajouter l'unité :mrgreen:

A+

merci pour vos reponses

dsl de vous desevoir mais "setInterval(function() {test();}, 100);" me donne le même resultat, elle est ignoré, pour globale et locale merci de le precisé mais dans mon cas sa ne change rien puisque setTimeout n'est pas reconnus :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<script type="text/javascript"> var i=0; function test() { while(i<100) { document.getElementById("img").style.height=i+30; i++; setTimeout("test", 100); } } </script>

---

pour l'unité par defaut s'est le pixel, sa marche puisque l'image est agrandie (le problem s'est qu'elle s'agrandie d'un seul coup "pas de pause"setTimeout("test", 100) n'est pas reconnus)

Mouarf... il est temps que je me repose moi !
Si, ton setTimeout est reconnu, mais dans ta fonction, le while est répété tant que i est inférieur à 100, donc ton image est agrandie avant que les multiples et innombrables setTimeout générés n'aient abouti !

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<script type="text/javascript"> var i=0; function test() { if(i<100) { document.getElementById("img").style.height=i+30+'px'; i++; setTimeout("test", 100); } } </script>

---

Il sert à quoi le i++ du coup ? :?

Et puis un appel récursif avec setTimeout(), c'est un setInterval() :mrgreen:

EDIT : et tu vas te retrouver avec 30px de trop ;)

A+

Citation:

---

Mouarf... il est temps que je me repose moi !
Si, ton setTimeout est reconnu, mais dans ta fonction, le while est répété tant que i est inférieur à 100, donc ton image est agrandie avant que les multiples et innombrables setTimeout générés n'aient abouti !

---

si je fais sa :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<script type="text/javascript"> var i=0; function test() { if(i<100) { document.getElementById("img").style.height=i+30+'px'; i++; setTimeout("test", 100); } } </script>

---

l'image s'agrandit d'un seul pixel a chaque fois que je repasse la sourie sur l'image, setTimeout ne fait aucune pause (si on fait setTimeout("test", 5000)) l'image rajoute un pixel sur le champ,

est ce que vous êtes sure que votre code sa marche?

Citation:

---

Et puis un appel récursif avec setTimeout(), c'est un setInterval()

---

vous pouvez me donner un exemple, car l'exemple :

Code:

---

1 2 3 4 5 6 7 8

setInterval(function() {test();}, 100);   var i=0; function test() { document.getElementById("img").style.height=i+30+'px'; }

---

sa marche pas,

merci d'avoir répondu

DSL de vous avoir déranger, le problème venez de l'id je fois prendre autre chose que img comme id de mon image maitenant le code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<script type="text/javascript"> var i=0; function test() { if(i<100) { document.getElementById("autreQueImg").style.height=i+30+'px'; i++; setTimeout("test", 100); } } </script>

---

marche a merveille merci Bovino et E.Bzz ;)