Question

这是一个长期困扰我的jQuery问题，我想终于找到解决方案。 Havng这段代码：

如果我将鼠标快速移动到所有对象中，则动画会中断，因为它不会完全展开。我怎么能这样做才能发生这种情况呢？

我尝试了“停止（真实，真实）”，但这会使动画失去平滑性，因为它会跳到动画队列的末尾。

感谢。

Answer 1

我认为他的意思是，如果他快速地将鼠标移开和移出，他不希望动画无限叠加。但是，执行.stop()将导致当前动画立即停止，而不是让当前动画运行并从队列中删除动画的 rest 。执行.stop(true, true)将跳转到当前动画的结尾并从那里继续。

OP想要的是让当前的动画运行，然后开始下一个动画，而不是在鼠标快速移动的情况下无限地叠加动画。

实现这一目标的一种方法是自己跟踪当前的动画元素。这显示了实现目标的一种方法：

http://jsfiddle.net/ZrdV6/

修改

在澄清之后我做了另一个例子。这基本上可以通过stop()对slideDown()和slideUp()设置动画的元素使用.animate()来防止高度混乱。

诀窍是自己使用{{1}}制作动画，并自己跟踪原始高度。

http://jsfiddle.net/YmwZa/1/

Answer 2

我使用了.stop( true, true )，似乎工作正常。

动画看起来仍然很流畅。

演示：http://jsfiddle.net/tomgrohl/Pqz9s/

Answer 3

我对“失去光滑度”的含义感到有些困惑 - 它对我来说仍然很顺利：http://jsfiddle.net/MDfgd/21/

Answer 4

$(document).ready(function(){

    $("ul.first li").mouseenter(function(){
        $("ul", this).slideDown();
    });
    $("ul.first li").mouseleave(function(){
        $("ul", this).slideUp();
    });

});

jQuery动画中断快速鼠标移动！

4 个答案: