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

为减轻这种情况，我已阅读到.slideToggle()之前放置的.stop(true)函数停止先前的动画并清除动画队列.所以我尝试了这段代码:

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

推荐答案

尝试

.stop(true,true)

---

，或者您可以使用此 hoverIntent插件

---

or you can use this hoverIntent plugin

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