Jquery Hover 问题 - 多次调用脚本

Question

我有一个简单的脚本，其中一个按钮包含在一个带有标签 ID 的 DIV 中。悬停时显示另一个具有内容 id 的 div。两个 DIV 都包含在 ID 为 basket-top 的 DIV 中。悬停调用附加到此 div。 这是 HTML：

<div id="basket-top">
    <div id="content"><br />
            <br />
            content here<br />
            <br />
    </div>
    <div id="label">label here</div>
</div><!-- /basket-top -->

这里是 JS：

$("#basket-top").hover( function () {
    $("#basket-top #content").slideDown(500);
}, function () {
    $("#basket-top #content").slideUp(500);
});

这工作正常，直到用户快速进出，一遍又一遍地调用该函数并且图层上下滑动几次。 如果上一个动作没有完成，有没有办法阻止函数被调用？

Answer 1

当您将鼠标悬停在 label 上时，这将显示 content 分区

$("#content").hide();
$("#label").hover(function () {
    $("#content").stop(true, true).slideDown(500);
}, function () {
    $("#content").stop(true, true).slideUp(500);
});

JsFIDDLE HERE

另外，请注意，您应该仔细检查您在此处提出的所有问题并接受正确的答案。当您发布新问题时，这将使其他人想要帮助您。并感谢那些花时间帮助你的人。

Answer 2

首先，"#basket-top #content" 是不必要的，因为 ID 必须是唯一的。 "#content" 就足够了。二、看jQuery的.stop()函数。

$("#basket-top").hover( function () {
    $("#content").stop(true,true).slideDown(500);
}, function () {
    $("#content").stop(true,true).slideUp(500);
});