Posez votre question Signaler

Animation javascript simple

Fetide68 523Messages postés 4 janvier 2009Date d'inscription 28 mai 2012Dernière intervention - Dernière réponse le 21 janv. 2010 à 09:29
Bonjour,
J'essaie de faire une petite animation simple en javascript, faire défiler un petit menu de gauche à droite au chargement de la page, mais la page plante... :
code :

function anime() {
	i = 0;
	
	while (i<150) {
		document.getElementById('menu1').style.left = i;
		i+10;
	}
}

setTimeout('anime();',1000);


C'est tout c...
ensuite y'a
<Body onload="anime();"> et la <div id="menu.."><code>Configuration: Windows Vista
Firefox 3.5.3
Lire la suite 

Animation javascript simple »

12 réponses
Réponse
+3
moins plus
Ah bah oui, forcément !
désolé.

Donc, pour une fonction javascript qui permet d'animer facilement le HTML :

http://sitesweb.abondance.free.fr/copyleft/billet.php?idBillet=25


(fais-moi savoir si tu y trouves ton compte)
Ajouter un commentaire
Réponse
+1
moins plus
Bonjour

Et l'incrémentation de i se fait par i+=10;, pas i+10 tout seul. Actuellement, ton i est fixe et tu ne sors jamais de ta boucle.
Il vaudrait mieux ta tempo soit plus courte mais située entre 2 passage dans la boucle.
Ajouter un commentaire
Réponse
+0
moins plus
la valeur de left en CSS s'exprime (dans ton cas) en pixels d'où la modif suivante:

function anime() {
	i = 0;
	
	while (i<150) {
		document.getElementById('menu1').style.left = i+'px';
		i+10;
	}
}

Ajouter un commentaire
Réponse
+0
moins plus
Marche pas... Ce que j'essaie de faire, c'est tout simplement une div (un menu) qui vient de la gauche et de comprendre comment je l'ai fait. Des scripts j'en trouve, mais je le pige pas... Je veux faire simple... Un truc de ce genre devrait marcher.
Ajouter un commentaire
Réponse
+0
moins plus
Tu dois intégrer le timer à ta fonction pour la rappeler, j'ai fait quelques modifs...

function anime() {
	
	var left = document.getElementById('menu1').style.left;
	var posPX = left.indexOf('px');
	var i = parseInt(left.substring(0, posPX));
	//document.write(i);
	
	i += 10;
	
	if (i<150) {
		document.getElementById('menu1').style.left = i+'px';
	}
setTimeout('anime();',1000);
}



Et le code de ton div, les styles position et left sont obligatoires; sinon ça ne marchera pas:

<div id="menu1" style="background-color:#000000; width:10px; position:absolute; left:0px;">toto</div>
Ajouter un commentaire
Réponse
+0
moins plus
Merci c'est cool, ca marche, seulement si si je met le style ailleurs grace à class="menu" ça ne marche plus...

Quand je fais style="left: ....." ça fonctionctionne, mais quand je fais class="menu", ça ne marche plus avec ma div... J'ai bien gardé l'id !
Ajouter un commentaire
Réponse
+0
moins plus
Normal, "document.getElementById('menu1').style.left" va chercher la propriété left de l'attribut style de l'élement menu1.

Si ton style est extérieur à la balise , javascript ne peut le trouver. Il faut donc qu'il soit défini en direct dans ta balise div.
Ajouter un commentaire
Réponse
+0
moins plus
aaaaaahhhhhhhh !!!

Bon à savoir...
Ajouter un commentaire
Réponse
+0
moins plus
Merci
Ajouter un commentaire
Réponse
+0
moins plus
Salut,
Si ça te dit, je peux aussi te proposer ce petit script de ma confection :

http://localhost/webmaster.bricks/billet.php?idBillet=26

Il permet de réaliser facilement des animations en javascript. Je pense que ça fera ton affaire.
Ajouter un commentaire
Réponse
+0
moins plus
Ton lien vers localhost ne fonctionne pas ... ?
Ajouter un commentaire
Réponse
+0
moins plus
Super ton lien et bravo, les scripts sont clairs, propres et très utiles !

Encore merci !
Ajouter un commentaire
Ce document intitulé « Animation javascript simple » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?