Afficher div sur mouseover sur une autre div et fermez toutes les autres divs avec la même classe

Question

J'ai une liste de divs (exemple simplifié)

<div class="title">text</div> 
<div class="description">text</div> 
<div class="title">text</div> 
<div class="description">text</div> 
<div class="title">text</div> 
<div class="description">text</div> 

.description est caché à la page charge quand je passe la souris sur un titre je montre la description de ce titre, lorsque je survole un autre titre, je montre la description de ce titre, mais ce que je veux aussi faire est de cacher ce dernier .description qui était ouvert.

J'ai essayé avec mouseout, mouseleave etc. mais je n'ai pas réussi à le faire fonctionner. Aucune suggestion?

$('.title').mouseover(function() { 
      $(this).next().fadeIn('fast'); 
     }); 

     $('.title')..mouseleave(function() { 
      $(this).next().slideOut('fast'); 
     }); 

Avec ça, je cache la description si je survole le même titre mais pas d'autres titres.

jQuery.fn.fadeToggle = function (speed, easing, callback) { 
     return this.animate({ opacity: 'toggle' }, speed, easing, callback); 
    }; 

    $('.title').mouseover(function() { 
      $(this).next().fadeToggle('fast'); 
    }); 

Answer 1

Vous pouvez spécifier leur sélecteur de classe pour les cacher tout, de cette manière que l'un d'entre eux sera affiché à la fois:

$('.title').mouseover(function() { 
    $('.description').hide(); 
    $(this).next().fadeIn('fast'); 
    }); 

Answer 2

Vous avez fait une faute de frappe ici:

$('.title')..mouseleave(function() { 

Il y a deux périodes.

Espérons que ça aide.

Answer 3

Votre code fonctionne si vous utilisez la bonne fonction. Il y a aucune méthodeslideOut. Utilisez soit fadeOut() ou slideUp(), par exemple:

$('.title').mouseover(function() { 
    $(this).next().fadeIn('fast'); 
}); 

$('.title').mouseleave(function() { 
    $(this).next().fadeOut('fast'); 
}); 

Voir: http://jsfiddle.net/Tjcvz/