deplacement fluide d'un div en js. Résolu

Question

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 =)

Afficher la suite

Azraka · Answer

Il faudrait que tu fasses en une fonction qui déplace ton menu de seulement quelques pixels (genre 10 ou 15) et après tu utilises la fonction javascript setInterval() pour que ta fonction s'exécute en boucle.

Voilà un peu d'aide pour le setInterval() : https://www.toutjavascript.com/reference/ref-window.setinterval.php

samsam26 · Answer

merci beaucoup, je vais aller regarder ça, je vous tient au courant.

samsam26 · Answer

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

samsam26 · Answer

merci beaucoup pour ton aide azraka.
Mais maleureusement je ne suis pas au résultat souhaité...
voici la page: http://samsam26.u7n.org/2ndsouffle/testmenuglissant.htm
le cd à gauche, je souhaite qu'il se deplace fluidement lorsque la souris est dessus et qu'il se range fluidement lorsque la souris le quitte. j'espère qu'avec la page, vous pourriez mieux saisir mon problème... encore merci azraka de perdre ton temps pour moi :s je suis ouvert à toute proposition pouvant faire avancer mon problème...
bonne soirée

samsam26 · Answer

p.s:
la page telle qu'elle c'est avec ce que tu m'as donné azraka. sauf pour le onmouseout, j'ai mis la même chose qu'avec le over mais avec la fonction range() et mon autre setinterval. (vous pouvez ouvrir les source, le script est dans la page, pas dans un fichier js si vous souhaitez en savoir plus, enfin seulement si vous souhaitez me venir en aide =D)

samsam26 · Answer

un GRAND merci Azraka, je vais déjeuner et je tente après^^

samsam26 · Answer

rebonjour -_-
Et bien malheureusement le résultat attendu n'est toujours pas là... j'ai mis à jour la page si vous souhaitez voir le nouveau résultat. Il parait identique au précédent: il n'appelle pas la fonction range lors du retrait de la souris, lorsque la souris passe dessus il faut "la frotter" pour qu'il sorte, et enfin le dernier problème, il n'y a pas pris en compte de la valeur maximum.
je bidouille un peu mon code afin de trouver la solution, mais je suis encore ouvert à toute proposition...

samsam26 · Answer

En bidouillant un peu j'arrive à ceci, je ne suis pas loin du resultat, mais la fonction du onmouseout, j'ai l'impression qu'elle est appellée même quand ya la souri dessus... en gros aussitôt arrivé ça repart,... function avance() { positiongauche+=10; document.getElementById("menu").style.left=positiongauche; } function sortir() { if (positiongauche < posmax) { sort=setInterval("avance()" ,50); } else { clearInterval(sort); } } function recule() { positiongauche-=10; document.getElementById("menu").style.left=positiongauche; } function ranger() { if (positiongauche > posmin) { range=setInterval("recule()" ,50); } else { clearInterval(range); } } et après j'appelle ranger() et sortir():

Utilisateur anonyme · Answer

besoin d'aide ?

samsam26 · Answer

euuu oui
un très gros besoin d'aide...
je ne sais pas si tu as suvie mon problème ou si tu souhaite une explication clair?

Utilisateur anonyme · Answer

ok, je vais voir ça

samsam26 · Answer

en bref:
j'ai un menu qui est positionné a gauche en absolue de -250px, je souhaiterais le deplacer de façon fluide à 0px lorsque la souris passe dessus, et le remettre à sa place lorsque la souris le quitte. voici le meilleur résultat que j'arrive à obtenir: http://samsam26.u7n.org/2ndsouffle/testmenuglissant.htm (script dans le code source ou deux messages au dessus). mon problème est qu'il ne se limite pas ou très mal (entre -250 et 0px) et qu'il ne se range pas au bon moment...

Utilisateur anonyme · Answer

Voici un script que j'ai fait :

samsam26 · Answer

merci c'est exactement ce que je veux veux, je vais l'eplucher et essayer de l'adapter a mon menu =)

Utilisateur anonyme · Answer

j'ai affiner le script pour qu'il soit plus efficace (voir en gras ce que j'ai ajouté):

samsam26 · Answer

merci pour ton script totoAussi, il marche très bien et a résolu mon problème =)

samsam26 · Answer

Juste une question, si ya une image sur le div: lorsque la souris passe sur l'image, elle est considéré comme en dehors du div, autrement dit, la fonction range est appellée. alors que l'image est pourtant dans le div... si vous avez une idée...

samsam26 · Answer

voilà! tout ceci fonctionne, même avec des images,... voici ce que j'ai rajouté: une variable qui vaut 0 si le menu est fermé et 1 si il est ouvert: tout fonctionne parfaitement! Encore merci à toto pour m'avoir donné de très bon résultats et a Azrak de m'avoir aidé.

samsam26 · Answer

oui j'avais pas envoyé la nouvelle page au serveur!
maintenant tu peux aller voir^^

samsam26 · Answer

oui je trouve aussi que le résultat est sympa, encore merci pour votre aide =)

claudiusse · Answer

Attention Transitional +'px'
obj.style.left=obj.offsetLeft+50+'px';//important pour la compatibilité

Deplacement fluide d'un div en js.

21 réponses

Votre réponse

Discussions similaires

Newsletters