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/

悬停悬停时的按钮描述？

1 个答案: