Mouse over "trop rapide" (ou mal géré…)

Bonjour à tous,

J'essaie d'adapter un code javascript qui permet d'avoir plusieurs éléments de menu, chacun ouvrant une div qui lui correspond en dessous, de façon fluide.

À la base, ce code est prévu pour répondre au clic et afficher en permanence l'un des éléments à ouvrir (si l'on n'a rien cliqué, le premier onglet est déplié par défaut).

J'essaie d'adapter ce javascript pour qu'aucun onglet ne soit ouvert par défaut et que l'événement déclencheur soit le survol.

Tout se passe bien, sauf quand je passe d'un élément de menu à l'autre de façon trop rapide, ce qui provoque une ouverture et fermeture multiple des div du bas (sur une grande hauteur), avant de finir par se positionner enfin comme je le souhaite.

J'aimerais donc que les choses se fassent de façon plus propre, même à grande vitesse.

Voici une image et le code que j'utilise en javascript.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

$(document).ready(function() { $('#tabMenu > li').mouseover(function(){ $(this).removeClass('mouseout'); $(this).addClass('mouseover'); $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('100'); }); $('#tabMenu > li').mouseout(function() { $(this).removeClass('mouseover'); $(this).addClass('mouseout'); $('.boxBody div').slideUp('100'); }); });

---

Une idée ? Merci pour votre aide !

regarde du coté de

Code:

---

.stop(true,true)

---

Aaaahhh, toujours ce goût pour les réponses laconiques, histoire que tout ne tombe pas tout cuit dans le bec du gars qui vient déjà de passer des heures dans la panade :)

Hier, je m'en étais vaguement sorti en effectuant un test sur la hauteur de ma div du bas, et en faisant un "hide" lorsque celle-ci était visible.

Mais après avoir suivi ton "indice", effectivement, j'arrive à quelque chose de plus propre. Merci à toi !

Les recherches en questions et les exemples que j'ai pu trouver me mènent à la question suivante : quelle est la différence entre mouseover(function) et hover(function) ? Si mon item est un lien, il vaut mieux mettre hover ?

Peux-tu me confirmer que mon code (qui essaie de suivre tes instructions) est juste ? :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

$(document).ready(function() { $('.tabMenu > li').mouseover(function(){ $(this).removeClass('mouseout'); $(this).addClass('mouseover'); $('.boxBody div:eq(' + $('.tabMenu > li').index(this) + ')').stop(true,true).slideDown({duration:600, easing:'easeOutQuad'}); }); $('.tabMenu > li').mouseout(function() { $(this).removeClass('mouseover'); $(this).addClass('mouseout'); $('.boxBody div').stop(true,true).slideUp({duration:600, easing:'easeOutQuad'}); }); });

---

Citation:

---

quelle est la différence entre mouseover(function) et hover(function) ?

---

.hover() est en fait un raccourci permettant de gérer dans une même méthode le survol et la sortie du survol.
Il existe cependant une différence notable avec mouseover() / mouseout() qui est que hover(callback[, callback]) est un raccourci pour mouseenter() et mouseleave() qui est plus adapté à la gestion des survols et sorties d'un élément dans le cas des éléments contenants eux-mêmes d'autres éléments enfants.

Pour illustrer cette explication théorique, imagine une balise <div> sur laquelle tu poses un gestionnaire de type mouseover ou mouseout et contenant par exemple un <span>. Alors le survol et la sortie du span déclencheront les événements, ce qui n'est pas le cas avec mouseenter et mouseleave.

Pfiouuu, une réponse explicite, détaillée et avec exemple… je suis gâté :)
Merci à toi Bovino.

Si je comprends bien, dans la mesure où la structure de mes listes risque d'être assez complexe au final (présence de span, d'images, etc), j'ai plutôt intérêt à rester sur mouseover et mouseout ?

pffff ... Beef tout ça pour ne pas être taxé de laconique ... ta mère ?

Hey SpaceFrog, on avait dit pas les habits, pas les mamans !

Bon alors, on prend les mêmes et on recommence…

En partant du code cité plus haut (et rappelé ci-dessous) qui semble fonctionner, comment puis-je exclure deux classes particulières de "li" de la fonction programmée ?

Par exemple, je souhaite que mes div s'ouvrent en survolant chacun des éléments de liste, sauf ceux qui sont de classe toto et tata.

Attention, si j'ai bien compris, nous sommes en présence de classes multiples ("toto", "toto mousover", etc.).

Une idée ?

(allez SpaceFrog, fais pas la tête) :P

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

$(document).ready(function() { $('.tabMenu > li').mouseover(function(){ $(this).removeClass('mouseout'); $(this).addClass('mouseover'); $('.boxBody div:eq(' + $('.tabMenu > li').index(this) + ')').stop(true,true).slideDown({duration:600, easing:'easeOutQuad'}); }); $('.tabMenu > li').mouseout(function() { $(this).removeClass('mouseover'); $(this).addClass('mouseout'); $('.boxBody div').stop(true,true).slideUp({duration:600, easing:'easeOutQuad'}); }); });

---

:not('.classe1, .classe2')

Avec un event.stopPropagation() ?

Merci SpaceFrog :P