jquery动画（几个元素）队列答案

【问题标题】：jquery animate (several elements) queuejquery动画（几个元素）队列
【发布时间】：2011-10-28 14:53:34
【问题描述】：

我有几个动画元素。如果您在子菜单上快速来回切换，则会出现队列，在最坏的情况下，功能似乎会损坏。我已经尝试过stop()、delay()、:animated。

你有什么建议让它发生:)？

jQuery('.submenu').hover(
    function(){
    jQuery(this).find('.ico').delay(100).animate({
        height: 24
        }, 'fast', function() {
            jQuery(this).parents('.submenu').find('ul').animate({
                height: 'toggle'
                }, 'slow', function() {
            });
    });

},
function(){
    jQuery(this).find('ul').delay(100).animate({
        height: 'toggle'
        }, 'fast', function() {
            jQuery(this).parent().find('a.submenuItem .ico').animate({
                height: 18
                }, 'fast', function() {
                });
    });
});

HTML

<li class="submenu"><a href="" class="submenuItem">About<span class="ico">more</span></a>
            <ul>
                <li><a href="#">Corporate</a></li>
                <li><a href="#">Facts</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">Franchising</a></li>
                <li><a href="#">Sponsoring</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </li>

【问题讨论】：

在这种情况下，我通常会使用 stop()。如果您创建一个 jsFiddle，我会在您的代码中四处寻找。
@maxedison jsfiddle.net/qGG53/10

标签： jquery hover jquery-animate

【解决方案1】：

你试过 .clearQueue() 方法吗？

clearQueue() documentation

【讨论】：

stop() 方法也应该实现你想要的 - learningjquery.com/2009/01/…
感谢您的回答。我已经在所有变体中尝试过 jQuery(this).find('.ico').stop(true,false).animate...。我已经尝试过 jQuery(this).find('.ico')。 clearQueue().animate.. 我已经快速阅读了文档，我不确定我是否正确使用它。但它似乎有点帮助，但有时它似乎卡住了，它不会再次打开..我不确定我是否必须设置它.animate-methods..？
我已经尝试了 learningjquery 的链接，我认为它会很有帮助，而且这是一篇很好的文章，但它并没有帮助我解决这种情况..
这是一个 jsfiddle，它更简洁地实现了我认为您正在努力实现的目标......但它仍然不能解决您的问题。您能否确认/否认这是否符合您的预期 - jsfiddle.net/qGG53
感谢您的努力。除了排队之外，这表现得像它应该的那样。但是我有更多的动画元素，我想知道是否可能是这样。我今天早些时候发现了 jsfiddle。看来我可以更新它，我会尝试添加一些 css 以便更好地查看所有需要更改的元素。我会告诉你的。

【解决方案2】：

这个问题从未真正得到解决。所以.. 与此同时，我使用了一些额外的脚本作为插件，这很有帮助。动画现在感觉好多了，似乎没有时间卡住。额外的脚本是 hoverIntent:http://cherne.net/brian/resources/jquery.hoverIntent.html

【讨论】：

【解决方案3】：

JQuery Debouncer 做到了这一切：

https://github.com/diaspora/jquery-debounce

您也可以如上所述基于 .clearQueue() 编写自己的解决方案。

【讨论】：