悬停悬停时的按钮描述？

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/