Action d�butant JavaScript

Bonjour � tous,

j'essaie d'apprendre seul � cr�er un site internet et ai un probl�me, je voudrai faire en sorte que lorsque la souris passe sur la "case1", l''affiche1" recouvre petit � petit ma "case1" de bas en haut puis s'arr�te en haut de la case mais je n'arrive pas � faire �a. Jusque la tout ce que j'ai r�ussis � faire c'est que si la souris passe sur l'affiche pendant qu'elle monte, elle recommence au d�but tout en continuant de monter (elle se d�double en quelque sorte), je n'arrive pas � faire mieux.

Merci beaucoup � ceux qui pourront m'aider !

Pi�ce jointe 605482

pouvez vous nous faire un exemple de test sur le site suivant par exemple ?
https://codesandbox.io/s/vanilla

Merci Mathieu je connaissais pas ce site il a l'air pratique, voila ce que j'ai r�ussis � faire :

https://codesandbox.io/s/competent-n...=/src/index.js

J'arrive � faire monter mon affiche de bas en haut mais lorsque la souris se place sur la partie bleu (l'affiche), elle se 'multiplie' et je n'arrive pas � �viter �a.
De plus, je ne sais pas comment accorder verticalement mon affiche et ma case (ici j'ai du monter mon affiche de 335px ce qui n'est pas tr�s beau)

Merci de votre r�ponse

en mettant "position=relative" pour l'�l�ment bleu, j'ai l'impression qu'on s'approche de ce que vous voulez faire :
https://codesandbox.io/s/xenodochial...=/src/index.js

Ah oui merci �a � r�gler le probl�me de la position, mais l'�l�ment bleu continue de se 'd�doubl�', peut �tre que je ne peut pas faire �a juste avec le JavaScript de base et que je dois utiliser une librairie ?

Bonjour,

Citation:

---

Envoy� par inspecteur_

j'essaie d'apprendre seul � cr�er un site internet...

---

Si tu en es au tout d�but de l'apprentissage, il faut commencer par apprendre le HTML et le CSS.

Car ce que tu cherches � obtenir se fait assez facilement en HTML + CSS (sans JS) :

Code:

---

<div class="box garagedoor slide-top">slide top > btm</div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

.box { display:inline-block; width:250px; height:200px; text-align:center; color:#fff; } /* ------------------ */ .garagedoor { position:relative; /* important */ } .garagedoor:before, .garagedoor:after { position:absolute; /* important */ content:''; display:block; z-index:-1; /* important (derrière le texte) */ } .garagedoor:before { left:0; right:0; top:0; bottom:0; background:green; } .garagedoor:after { background:blue; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease; } /* ------------------ */ /* slide top > btm */ .garagedoor.slide-top:after { left:0; right:0; top:0; bottom:100%; } .garagedoor.slide-top:hover:after { top:0; bottom:0; }

---

VARIANTES :

• https://codepen.io/jreaux62/pen/XWgwwPv

Bonjour et bienvenue sur DVP.

Citation:

---

Envoy� par inspecteur_

mais l'�l�ment bleu continue de se 'd�doubl�'...

---

Ce que tu essaies de faire est effectivement tout � fait faisable en CSS et c'est surement m�me pr�f�rable, ceci �tant ton plus gros soucis vient de cette ligne :

Code:

---

case1.addEventListener("mouseover", fct1);

---

ton mouseover est d�clench� plus souvent que tu ne le penses, ajoute un console.log("over") en entr�e de ta fonction pour t'en rendre compte.

Pour palier ce soucis et �tre au plus proche du :hover en CSS il te faut utiliser l'�v�nement mouseenter :

Code:

---

case1.addEventListener("mouseenter", fct1);

---

Nota :
� Un chose qui serait � faire et de mettre un clearInterval(timer) en entr�e de fonction pour �viter le cumul des timers.
� Il serait �galement bon de regarder du c�t� de requestAnimationFrame pour g�rer ton animation.

D'accord merci � vous tous, je vais essayer avec les 2 solutions et continuer � apprendre HTML et CSS.
D'ailleurs est-ce que vous connaissez des cours en ligne complet sur ces sujets ? J'en ai trouver quelques uns mais vaut mieux plus que pas assez