Animation javascript simple

Fetide68 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   -  
Fetide68 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   -
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

12 réponses

  1.
    juanou Messages postés 145 Statut Membre 58
     
    Ah bah oui, forcément !
    désolé.

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

    https://reactdom.com/restful-api/

    (fais-moi savoir si tu y trouves ton compte)
    3
  2. le père
     
    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.
    1
  3. Ozimandias Messages postés 528 Statut Membre 46
     
    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;
	}
}
    0
  4. Fetide68 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   32
     
    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.
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Ozimandias Messages postés 528 Statut Membre 46
     
    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>
    0
  7. Fetide68 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   32
     
    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 !
    0
  8. Ozimandias Messages postés 528 Statut Membre 46
     
    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.
    0
  9. Fetide68 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   32
     
    aaaaaahhhhhhhh !!!

    Bon à savoir...
    0
  10. Fetide68 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   32
     
    Merci
    0
  11. juanou Messages postés 145 Statut Membre 58
     
    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.
    0
  12. Fetide68 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   32
     
    Ton lien vers localhost ne fonctionne pas ... ?
    0
  13. Fetide68 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   32
     
    Super ton lien et bravo, les scripts sont clairs, propres et très utiles !

    Encore merci !
    0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Idées animations centre d'appel
goliath09 -
romain -

8 réponses