i Hola everybody !

Je cherchais un moyen de faire transformer un carré en rond en changeant la propriété border-radius avec "animate", puis de le retransformer en carré. Mais la deuxième étape ne marchait jamais, quel que soit le navigateur. Peu importe la durée, il le faisait en un éclair.

Je me suis donc dit que j'allais le faire à l'ancienne: une bonne vieille boucle à itération, et à chaque pas, diminuer border-radius de 1. Ca pourrait marcher, me dis-je, à condition de dire à js d'attendre un peu à chaque fois.

J'ai ensuite trouvé un script sympa permettant de faire ca. Mais ca ne marche pas. Diable, pas mon jour de chance...
Bon, dans le vif du sujet:
Le script trouvé sur internet:

function pausecomp(ms) {
ms += new Date().getTime();
while (new Date() < ms){};
}

c'est moi qui ai ajouté le ";" après le" ms){}"

L'auteur disait d'appeler la fonction et de mettre en argument le nombre de millisecondes à attendre. Je m'imagine tout à fait que l'erreur peut venir de là parceque je l'ai mal appelée. Mais ce n'est pas comme dans le chapitre fonction anonyme du tuto JS ( site du zéro), puisqu'elle a déja été définie... Voilà comment j'ai fait:

function carre(cible) { 
    
    var etape=20;
    for (var iter = 0; iter < 19; iter++) {
    $("#"+cible.id).css("-moz-border-radius",etape);
	$("#"+cible.id).css("border-radius",etape);       
    pausecomp(30);	
    etape-=1;
   
   }
   }

Et là...rien. Je sais que je ne sauverai pas le monde en transformant un carré en rond puis inversément, mais ca me plairait quand meme vachement. Si quelqu'un a une idée, n'hésitez pas !!! Merci d'avance

setTimeout() pour retarder l'exécution d'une fonction.

Non, ca ne marche pas. Je crois que setTimeout attend pour exécuter ce qu'il contient, mais pendant ce temps JS passe à la suite... C'est pourquoi je cherchais un moyen de lui faire vraiment attendre.

Maintenant que j'y pense, ca m'empecherait de faire autre chose pendant que mon rond redevient carré, mais ca pourrait etre pratique de pouvoir vraiment attendre.

Ta méthode est extrêmement déconseillée, tu fais forcer le processeur pour rien, c'est stupide. Bref, il faut savoir jongler avec setTimeout même si c'est pas toujours simple .

Ok. Mais donc, pour l'instant j'ai ceci:

function carre(cible) { 
    
    var etape=20;
    for (var iter = 0; iter < 19; iter++) {
	
    $("#"+cible.id).css("-moz-border-radius",etape);
	$("#"+cible.id).css("border-radius",etape);     
	
    setTimeout( function()
	{
    etape-=1},100);
   
   }
   }

Elle est déclenchée onmouseout sur des div. Elle arrive après (logiquement) la fonction onmouseover sur ces memes div.

function rond(cible) { 


   $("#"+cible.id).animate({"border-radius": 20,"-moz-border-radius":20},1800 );
   }

Comme vous le voyez, je suis pas encore un pro du JS... je pense que la syntaxe est bonne, meme s'il y avait moyen de faire plus court, mais néanmoins ca ne fonctionne pas. Si quelqu'un a une idée, merci beaucoup!