Discussion :

[Harlock999]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[SpaceFrog]

regarde du coté de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.stop(true,true)

[Harlock999]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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'});
  });
});

[Bovino]

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.

[Harlock999]

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 ?

[SpaceFrog]

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