[Résolu] Une anim pour changer la taille d'un élément

Bonjour à tous,

J'en profite pour poser une autre question qui me taraude et le fait que je me la pose démonre encore une fois la faiblesse de mes connaissances en JS.

Je voudrais avoir un div dont les dimensions sont définies par des variables JS (afin de les faire modifier dans le temps : le div doit contenir une image et ne mesure à son ouverture que 0 de large et 0 de haut pour finir à X et Y une demi-seconde après, X et Y étant les dimensions de l'image)

<script type="text/javascript">
<!--
hauteur = 0;
largeur = 0;
maxhauteur = 100;
maxlargeur = 100;
max=Math.max(maxhauteur, maxlargeur);
for (x=0;x<max;x++) {
if (x<maxhauteur) {hauteur++;}
if (x<maxlargeur) {largeur++;}
document.write(largeur+'<br>'+hauteur+'<br>');
//-->
</script>

J'ai commencé à faire un code qui modifie la largeur et la hauteur, mais je ne vois pas comment on peut appliquer en temps réel (donc sans recharger la page) ces valeurs aux width et height du div. C'est un problème assez primordiale, car sans ça, impossible de faire la moindre animation dhtml...

Quelqu'un connait-il la réponse? Ou pouvez-vous m'indiquer sinon un site où je pourrais trouver ces infos (dans un français que je peux comprendre)

Merci d'avance et à plus tard,

Korben
Modifié par korben (24 Dec 2005 - 06:48)

Bonjour,

script écrit en live et donc sans garantie de fonctionnement... mais l'idée est là.

function animImage (id, maxX, maxY, dur) {
var img = document.getElementById(id);
img.style.width = '0px';
img.style.height = '0px';
img.pasX = maxX/dur;
img.pasY = maxY/dur;
runAnim(id, dur);
}
function runAnim  (id, dur) {
var img = document.getElementById(id);
var ws = img.style.width;
var hs = img.style.height;
var w = parseInt(ws.substring(0, ws.length -2));
var h = parseInt(hs.substring(0, hs.length -2));
w += img.pasX;
h += img.pasY;
img.style.width = w+'px';
img.style.height = h+'px';
if (dur >0) setTimeout("runAnim(\"" + id + "\", " + (dur -1) + ");", 100);
}

En appelant la fonction animImage, tu prépares et tu lances l'animation : id = identificateur id de l'image, maxX et maxY la taille, et dur le nombre d'étapes.

Merci beaucoup! Je vais essayer de suite.

Je viens d'essayer le script.

<script type="text/javascript">
function animImage (maxX, maxY, dur) {
width = 0;
height = 0;
pasX = maxX/dur;
pasY = maxY/dur;
runAnim(dur);
}
function runAnim (dur) {
var w = width;
var h = height;
w += pasX;
h += pasY;
document.write(dur);
if (dur >0) setTimeout("runAnim(" + (dur -1) + ");", 1);
}
animImage (300, 300, 50);
</script>

En lançant la fonction animImage, le document.write(dur) ne renvoie que 49 alors qu'il devrait renvoyer 50-49-48-47, etc...

Savez-vous pourquoi?

Efeectivement, ça marche avec alert. Merci beaucoup!

merci pour tout cette aide. Le seul hic (et de taille) est que ça ne marche que sous ie. Si on prend le code suivant :

function animImage (id, maxX, maxY, dur) {
width = 0;
height = 0;
pasX = maxX/dur;
pasY = maxY/dur;
runAnim(id, dur);
}
function runAnim (id, dur) {
var img = document.getElementById(id);
var w = width;
var h = height;
w += pasX;
h += pasY;
width = w;
height = h;
img.style.width = width;
img.style.height = height;
if (dur >0) setTimeout("runAnim(\"" + id + "\", " + (dur -1) + ");", 1);
}

Tout marche sur ie mais pas sur Firefox. Après différents tests, j'ai pu voir que ce qui ne marche pas, c'est le :
img.style.width = width;
à la toute fin.
SI l'on met "alert(width)" à la fin de la fonction runAnim, les valeurs sont correctes. Par contre, si l'on met "alert(img.style.width)," la valeur retournée est nulle (vide), et ce, uniquement sous Firefox. Alors que "img.style.width = width"

Pourquoi, monde cruel?
Modifié par korben (21 Dec 2005 - 04:24)

Rajoute +'px' à img.style.width = width et la même chose pour la ligne avec height.
Modifié par QuentinC (21 Dec 2005 - 06:07)

J'avais oublié de donné le résultat :

id= id de l'émément dont on veut modifier la taille
X0 = largeur de départ
Y0 = hauteur de départ
X1 = largeur d'arrivée
Y1 = hauteur d'arrivée
dur = nombre d'étapes (détermine la durée et la fluidité de l'animation)

function animImage (id, X0, Y0, X1, Y1, dur) {
var img = document.getElementById(id);
img.width = X0;
img.height = Y0;
img.pasX = (X1-X0)/dur;
img.pasY = (Y1-Y0)/dur;
runAnim(id, X1, Y1, dur);
}
function runAnim (id, X1, Y1, dur) {
var img = document.getElementById(id);
var w = img.width;
var h = img.height;
w += img.pasX;
h += img.pasY;
img.width = w;
img.height = h;
img.style.width = img.width+'px';
img.style.height = img.height+'px';
if (dur >0 && Math.round(img.width)<X1 && Math.round(img.height)<Y1) setTimeout("runAnim(\"" + id + "\", "+X1+", "+Y1+", " + (dur -1) + ");", 1);
}

En encore mille fois merci, QuentinC !
Modifié par korben (24 Dec 2005 - 06:47)