Description du bouton lors du vol stationnaire?

Question

J'ai un menu qui quand un bouton est survolé, il affiche la description du bouton dans un DIV, cette description est stockée dans le 'data-desc' attribué dans chaque bouton.

<ul id="menu"> 
    <li><a href="page" data-desc="Page description">Button</a></li> 
    <li><a href="page" data-desc="Page description">Button</a></li> 
    <li><a href="page" data-desc="Page description">Button</a></li> 
    <li><a href="page" data-desc="Page description">Button</a></li> 
    <li><a href="page" data-desc="Page description">Button</a></li> 
    <li><a href="page" data-desc="Page description">Button</a></li> 
    <li><a href="page" data-desc="Page description">Button</a></li> 
    <li><a href="page" data-desc="Page description">Button</a></li> 
</ul> 

<div id="showdescription"></div> 

JQUERY:

$("ul#menu li").hover(function(){ 
     $("#showdescription") 
      .hide() 
      .html($(this).children("a").eq(0).data("desc")) 
      .show("slide", {direction: "down"}); 
    }, function(){ 
     $("#showdescription").hide().html("DEFAULT DESCRIPTION").show("slide", {direction: "down"}); 
    }); 

Cela fonctionne bien, mais le problème est quand je me déplace rapidement le pointeur de la souris à travers tous les boutons encore et encore, l'animation jouer beaucoup de temps.

Comment puis-je l'arrêter et afficher l'animation UNE seule fois lorsque l'utilisateur passe la souris sur tous les boutons?

Answer 1

essayez la méthode stop():

$("ul#menu li").hover(function(){ 
    $("#showdescription") 
     .hide() 
     .html($(this).children("a").eq(0).data("desc")) 
     .stop().slideDown() 
}, function(){ 
    $("#showdescription").hide().html("DEFAULT DESCRIPTION").slideDown(); 
}); 

http://jsfiddle.net/zfnx6/46/