懸停懸停時的按鈕描述？

Question

我有一個菜單，當一個按鈕懸停時，它顯示在DIV中按鈕的描述，這個描述存儲在每個按鈕中的'data-desc'中。

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

這工作得很好，但問題是，當我快速移動鼠標指針直通所有按鈕連連，動畫會扮演很多次。

如何讓它停止並只顯示動畫一次當用戶將鼠標移動到所有按鈕上時？

Answer 1

嘗試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/