$.slideToggle() &$.hover() 动画队列问题 [英] $.slideToggle() & $.hover() animation queue issue

问题描述

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

I'm trying to set up a pretty basic hover animation in jQuery. Mouse over a div and the major content is slid down, mouse up and it slides up.

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

这段代码运行良好，但明显的问题是如果鼠标进出速度非常快，动画会排队.

This piece of code works fine, but the obvious problem is the animation queuing if you mouse in and out really quickly.

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

To alleviate this I have read that the .stop(true) function placed before the .slideToggle() stops the previous animation and clears the animation queue. So I tried this code:

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

我现在的问题是这似乎只适用于第一个 mousein 和 mouseout.之后动画不再触发，什么也没有发生.这是 Google Chrome DEV 频道.

My problem now is that this only seems to work on the first mousein and mouseout. After that the animations no longer trigger and nothing happens. This is Google Chrome DEV channel.

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

This seems to be exacerbated by how fast you move the mouse in and out.

我似乎无法弄清楚问题是什么，这个 JSFiddle 有一个工作(和在我的电脑上损坏)示例.

I can't seem to work out what the issue is, this JSFiddle has a working (and breaking on my computer) example.

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

I suspect this is a bug in jQuery 1.4.2 and have lodged a bug ticket: http://dev.jquery.com/ticket/6772

推荐答案

try

.stop(true,true)

<小时>

或者你可以使用这个 hoverIntent 插件

这篇关于$.slideToggle() &amp;amp;$.hover() 动画队列问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！