Discussion :

[bracket]

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 :

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

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

[E.Bzz]

Bonjour,
essaye avec setInterval() ...

Code :

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

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

avec

Code :

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

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

A+

[Bovino]

Tu commets plusieurs erreurs de conception et de syntaxe.

Code :

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

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 :

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

1
2
3
4
var i=0;
function test()
{  
        while(i<100)

Code :

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

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

le height doit avoir une unité...

Code :

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

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

[E.Bzz]

Oups !
Edité pour ajouter l'unité

A+

[bracket]

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 :

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

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)

[Bovino]

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 :

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

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>

[E.Bzz]

Il sert à quoi le i++ du coup ?

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

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

A+

[bracket]

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 :

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

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?

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

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

Code :

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

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

[bracket]

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 :

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

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