Animation javascript
Résolu
Bonsoir,
J'ai un petit souci avec la manipulation des propriétés d'objets. J'ai bidouillé (code repris du siteduzero) le code ci-dessous et l'image ne change pas sa taille. Quelqu'un aurait-il une idée ?
var myImg = document.getElementById('myImg').width;
function anim() {
myImg = myImg - 20;
if ( myImg > 200 ) {
setTimeout(anim, 40); // La fonction anim() fait appel à elle-même si elle n'a pas terminé son travail
}
}
anim(); // Et on lance la première phase de l'animation !
J'ai un petit souci avec la manipulation des propriétés d'objets. J'ai bidouillé (code repris du siteduzero) le code ci-dessous et l'image ne change pas sa taille. Quelqu'un aurait-il une idée ?
var myImg = document.getElementById('myImg').width;
function anim() {
myImg = myImg - 20;
if ( myImg > 200 ) {
setTimeout(anim, 40); // La fonction anim() fait appel à elle-même si elle n'a pas terminé son travail
}
}
anim(); // Et on lance la première phase de l'animation !
3 réponses
-
Trouvé :
var myImg = document.getElementById('menu');
myImg.style.height=myImg.offsetLeft;
function anim() {
if (myImg.offsetLeft<=1000)
{
setTimeout(anim, 40); // La fonction anim() fait appel à elle-même si elle n'a pas terminé son travail
}
myImg.style.left=myImg.offsetHeight + 1;
}
anim(); // Et on lance la première phase de l'animation ! -
salut ca ne serait pas par hazard un document.getElementById('myImg').style.width;
-
salut !
dans ta fonction tu récupère la taille de #myImg ,
tu lui enleve 20
et tant que img supérieur a 200
tu recomences (tous les 40 ms)
tu enleves 20 (donc debut le debut ça la taillle -40);
et ainsi de suite jusqu'a ce que #myImg inferieur a 200;
le soucis c'est que cette valeur tu ne la réatribut pas a ton images,
tu manipule une variable. pas la taille de l'image , uniquemnt sa valeur.
en js brute je serais pas te dire , j'utilise des librairie (jquery )
ça peut etre plus sympas a utilsé
tu apelles la librarie dans une balsie script
--> https://jquery.com/
et aprés ça donne ça
$(document).ready(function() {
$("##myImg").animate({
width: "200"
}, 500 , );
});
-->http://jquery.developpeur-web2.com/documentation/effets/animate.php
et sinon sur firefox utilise ta console d'erreur .
