0

我有一个菜单，当一个按钮悬停在上面时，它会在 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>

查询：

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

这很好用，但问题是当我一次又一次地通过所有按钮快速移动鼠标指针时，动画会播放很多次。

当用户将鼠标悬停在所有按钮上时，如何让它停止并仅显示一次动画？

4

1 回答 1

2

尝试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/

于 2012-06-09T19:11:55.040 回答