Описание кнопки при наведении курсора?

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/