Meilleure pratique Combinaison Toggle et Hover

Question

J'ai certains éléments qui ont des effets de survol ainsi que devraient être sélectionnés lorsque vous cliquez dessus. Actuellement, lorsque j'ajoute le stop(), l'animation s'arrête lorsque vous cliquez dessus. J'ai essayé d'utiliser fadeToggle() pour le même effet mais je n'ai pas pu comprendre comment le faire fonctionner correctement. Le id que je cible sont passés au href de l'élément sur lequel vous avez cliqué. Est-ce que quelqu'un peut donner des indications sur la meilleure façon d'écrire ce script?

$(function() { 
    $("#map-hovers > ul > li").hide(); 
    $('area').click(function(e) { 
     e.preventDefault(); 
     var $hoodClick = $($(this).attr('href')); 
     if ($hoodClick.hasClass('selected')) { 
      $($hoodClick).fadeOut().removeClass('selected'); 
     } else { 
      $($hoodClick).fadeIn().addClass('selected'); 
     } 
    }).hover(function() { 
     var $hoodHoverOver = $($(this).attr('href')); 
     $hoodHoverOver.fadeIn(); 
    }, 
    function() { 
     var $hoodHoverOut = $($(this).attr('href')); 
     if ($hoodHoverOut.hasClass('selected')) { 
      } else { 
      $hoodHoverOut.fadeOut(); 
     } 
    }) 
}); 

Answer 1

Utilisez .stop(true, true). Il passe à la fin de l'animation & efface la file d'attente d'animation. En savoir plus à ce sujet dans l'API: http://api.jquery.com/stop/