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() 来停止以前的悬停动画。

结帐摘要片段了解更多信息

＆＃13;

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

＆＃13;

.CategorizedText{
  display:none;
}

＆＃13;

<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>

＆＃13;

Jquery Toggle效果/在多次悬停后不会停止运行

1 个答案: