Deplacement fluide d'un div en js.

Résolu/Fermé
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 - 6 févr. 2009 à 15:27
 claudiusse - 14 nov. 2011 à 20:49
Bonjour, à tous.
alors voilà, j'ai un petit problème, je débute avec le javascript, et j'ai encore beaucoup de mal à réussir ce que je souhaite faire.
j'ai un menu à gauche de 400px de large, il est positionné à -250px du bord gauche (il y a donc 150px qui sont visible sur la page) et voilà ce que je souhaiterais faire: lorsque la souris passe dessus, il se "deploit" et lorsque elle le quitte, il se "range". j'ai réussi avec onmouseover et onmouseout et en changent le positionnement gauche. sauf que je souhaiterais que le mouvement soit fluide, j'ai donc fait:

function deplace()
{
testpos=false;
if(positiongauche==0){tespos=true;}
while (!tespos)
{
positiongauche++;
document.getElementById("menu").style.left=positiongauche;
}
}
timer2 = setInterval("deplace()",50);

function range()
{
testpos2=false;
if(positiongauche==-250){tespos2=true;}
while (!tespos2)
{
positiongauche--;
document.getElementById("menu").style.left=positiongauche;
}
}
timer3 = setInterval("range()",50);



ça c'est pour le javascript.
et dans mon html:

<div id="menu" onmouseover="deplace()" onmouseout="range()" >
tout mon menu est ici
</div>


bon évidemment tout ça ne marche pas...
voilà... je ne sais pas trop doù vient le problème, c'est pourquoi je voudrais savoir si l'un de vous a une solution.
je vous remercie d'avance =)
A voir également:

21 réponses

samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
6 févr. 2009 à 19:16
rebonjour...
bon je me casse la tête depuis tout à l'heure à faire plein d'essais...
voici mes deux fonctions:

function sortir()
{
positiongauche+=10;
document.getElementById("menu").style.left=positiongauche;
}
var timer2 = setInterval("sortir()",50);


function ranger()
{
positiongauche-=10;
document.getElementById("menu").style.left=positiongauche;
}
var timer3 = setInterval("ranger()",50);


bon voici mes problèmes:
-je ne sais pas où mettre la boucle (pour délimiter la fin)
-lorsque j'appelle la fonction avec mes mouseover et mouseout, le setinterval n'est pas pri en compte vu que le menu ne se deplace que de dix pixels.

merci de bien vouloir m'aider s'il vous plait...
-1
Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014 13
7 févr. 2009 à 23:39
Il faut que tu enlèves le setInterval de tes fonctions et que tu le mettes lors de l'appel. Ce qui donne :
onmouseover="boucle = setInterval('XXXXX, 50')"
(à la place de XXXXX tu mets soit 'sortir' soit 'ranger')

et pour la fin de la boucle tu mets
onmouseout="clearInterval(boucle)"

Je pense que ça devrait marcher.
0