Question

I have a menu that when a button is hovered over, it displays the description of the button in a DIV, this description is stored in the ‘data-desc’ attributed in each button.

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

This works fine but the problem is when I quickly move the mouse pointer thru all buttons again and again, the animation will play lots of times.

How can I make it stop and only show the animation ONE time when the user goes with the mouse over all buttons?

Answer 1

try stop() method:

$("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/