javascript - $.slideToggle() & $.hover() 动画队列问题

Question

我正在尝试在 jQuery 中设置一个非常基本的悬停动画。将鼠标悬停在 div 上，主要内容会向下滑动，鼠标向上，主要内容会向上滑动。

<script type="text/javascript">
    $(function () {
        $('.listItem').hover(function () {
            $(this).find('.errorData').slideToggle('slow');
        });
    });</script>

这段代码工作正常，但明显的问题是，如果鼠标快速移入和移出，动画会排队。

为了缓解这个问题，我读到放置在 .slideToggle() 之前的 .stop(true) 函数会停止上一个动画并清除动画队列。所以我尝试了这段代码:

<script type="text/javascript">
    $(function () {
        $('.listItem').hover(function () {
            $(this).find('.errorData').stop(true).slideToggle('slow');
        });
    });</script>

我现在的问题是，这似乎只适用于第一次鼠标进入和鼠标退出。之后动画不再触发并且什么也没有发生。这是 Google Chrome 开发 channel 。

您将鼠标移入和移出的速度似乎会加剧这种情况。

我似乎无法弄清楚问题是什么，这个 JSFiddle有一个工作(并且在我的计算机上损坏)示例。

编辑:我怀疑这是 jQuery 1.4.2 中的一个错误，并已提交错误票:http://dev.jquery.com/ticket/6772

Answer 1

尝试

.stop(true,true)

---

或者你可以使用这个hoverIntent plugin