Deplacement fluide d'un div en js.

Résolu

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

Déplacer div javascript
Déplacer colonne excel - Guide
Déplacer barre des taches windows 11 - Guide
Telecharger javascript - Télécharger - Langages
Déplacer dossier onedrive - Guide
Div c++ - Télécharger - Langages

21 réponses

Réponse 21 / 21

samsam26 Messages postés 105 Date d'inscription Statut Membre Dernière intervention 6

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...

Azraka Messages postés 252 Date d'inscription Statut Membre Dernière intervention 13

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.

Discussions similaires

Impossible de supprimer photo galaxy s4

java script error in the main process

SOS EXCEL

Deplacer et relier le dossier AppData pour vider le disque C

Votre réponse

Discussions similaires