Discussion :

[Admirall]

Bonjour,

Je dois réaliser une intégration avec du JS avec un texte qui s'affiche dans un bloc unique au passage de la souris sur un titre (3 en tout).
J'ai récupéré un code fonctionnelle mais l'action sur ce dernier étant au clic je l'ai donc modifié par un mouseover afin d'avoir le résultat escompté.
Tout fonctionne bien sauf que si je passe trop vite avec ma souris d'un titre à un autre, les 2 contenus correspondants s'affichent en même temps à la suite.
Quelqu'un aurait-il une solution pour éviter cette superposition ?

Voici le code en question :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
$(function(){
  $('#sidemenu a').on('mouseover', function(e){
    e.preventDefault();
 
    if($(this).hasClass('open')) {
      // do nothing because the link is already open
    } else {
      var oldcontent = $('#sidemenu a.open').attr('href');
      var newcontent = $(this).attr('href');
 
      $(oldcontent).fadeOut('fast', function(){
        $(newcontent).fadeIn().removeClass('hidden');
        $(oldcontent).addClass('hidden');
      });
 
 
      $('#sidemenu a').removeClass('open');
      $(this).addClass('open').stop(true,true);
    }
  });
});
</script>

[SylvainPV]

Le callback passé au fadeOut se déclenchera tout le temps, même si le handler du mouseover est rappelé entre temps. Il faut annuler l'exécution programmée de ce callback, par exemple avec $(elem).stop(true, true) :
http://api.jquery.com/stop/#clearQueuegotoEnd

Tu l'as appliqué sur le lien du menu, je ne sais pas trop à quoi ça sert (ce lien est-il animé ?). Il faudrait plutôt l'appliquer sur oldcontent

[Admirall]

Oui le lien est animé.
Pour décrire brièvement la structure, on a une colonne à gauche avec 3 titres encadrés (qui change de couleur en hover) et à un droite un bloc texte où s'affichent 1 des 3 textes quand on passe la souris sur un des titres correspondants.