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>

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

これは正常に機能しますが、問題は、すべてのボタンを介してマウスポインターをすばやく何度も何度も動かすと、アニメーションが何度も再生されることです。

ユーザーがすべてのボタンの上にマウスを置いたときに、アニメーションを停止して1回だけ表示するにはどうすればよいですか？

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 に答える