Jquery 切换效果/多次悬停后不会停止 运行

Question

我在列表中有一个 jquery 脚本 运行，悬停时会切换容器 div 的子元素。问题是每次您将鼠标悬停在该元素上时，脚本队列的另一个切换。

这本质上不是问题，但是当我在页面上移动太多次并且不得不观察效果错误以尝试赶上悬停次数时，我发现这很烦人。我想知道是否有办法在悬停释放时完全停止效果。不知道该怎么做，但我尝试将 .stop() 放在我的 .toggle() 脚本前面。它在一定程度上起作用，但由于故障太多而无法发挥作用。

为什么动画要排队，我该如何覆盖它？

这是我的代码：

HTML:

    <div class="CategoryText">

       <li> <span><u>Peripheral steroid injection</u></span></li>

    <div class="CategorizedText">

        <ul class="Hoverlist"><li>Trigger Point Injection</li>
                                <li>Carpel tunnel injection</li>
                                <li>Tendon sheath injection</li>
                                <li>Tendon insertion site injection</li>
                                <li>Joint injection</li>
                                <li>Bursa injection</li>
        </ul>

    </div>  
    </div>

JQUERY:

<script type="text/javascript">

 $(document).ready(function() {
$(".CategoryText").hover(function () {
    $(this).find(".CategorizedText").slideToggle(800);
});
});

</script>

Answer 1

您可以使用.stop()来停止之前的悬停动画。

结帐片段以获取更多信息

$(document).ready(function() {
$(".CategoryText").hover(function () {
    $(this).find(".CategorizedText").stop().slideToggle(800);
});
});

.CategorizedText{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="CategoryText">

       <li> <span><u>Peripheral steroid injection</u></span></li>

    <div class="CategorizedText">

        <ul class="Hoverlist"><li>Trigger Point Injection</li>
                                <li>Carpel tunnel injection</li>
                                <li>Tendon sheath injection</li>
                                <li>Tendon insertion site injection</li>
                                <li>Joint injection</li>
                                <li>Bursa injection</li>
        </ul>

    </div>  
    </div>