jquery animate 函数起作用然后反转它的变化

Question

我有一个 div 容器，里面有一个列表。该列表非常大，所以我将容器的高度限制为 400 像素，直到发生鼠标悬停事件。

当鼠标悬停事件发生时，我运行以下 jquery

        $(".home-sidewidt").mouseover(function(){               

            if (!$(".home-sidewidt").hasClass("animation-run")) {
                $(".home-sidewidt").css("overflow", "visible");
                $(".home-sidewidt").animate({height:"1200px", queue: false},2000);
                $(".home-sidewidt").toggleClass("animation-run");
            }
        });

这会将列表的高度扩展到 1200 像素，并让用户选择他们想要的内容。当用户点击页面上其他任何地方的容器时，我运行以下命令:

        $('html').click(function() {
            if ($(".home-sidewidt").hasClass("animation-run")) {
                $(".home-sidewidt").animate({height:"400px", queue: false},2000);
                $(".home-sidewidt").css("overflow", "hidden");
            }
        });

这会使容器的高度回到 400px。

现在这两段代码似乎都可以正常工作，除了在用户单击列表后它滑回 400 像素，大约 3/4 秒后又回滚到 1200 像素。事实上，回滚前的持续时间与动画中指定的持续时间大致相同，我认为“打开列表”动画再次运行，但在调试时似乎并非如此。

我已经试验过，如果我点击页面(而不是列表)2 或 3 次，列表重新展开之前的等待时间与我点击的次数直接相关。即如果我点击 2 次大约需要 8 秒，点击 3 次需要 12 秒等等。它是动画持续时间的倍数。

我本来打算为此做一个 jsfiddle，但列表使用的是 superfish 插件，并且需要许多 css 和 .js 文件，这看起来很棘手。

问候, sapatos

Answer 1

我已经把你得到的东西放在一个 plunker 中，其中还包括解决方案: http://plnkr.co/edit/41eE6o?p=preview

首先要更改的是，您应该使用不同的函数签名让动画使用队列:false。

这个:

$(".home-sidewidt").animate({height:"1200px", queue: false},2000);

需要改成这样:

$(".home-sidewidt").animate({height:"1200px"}, {queue: false, duration: 2000});

您在第一个参数中包含 queue: false 是不正确的部分。要仍然包含 queue: false，请使用 animate 的双参数形式，其中第二个参数是具有选项的对象。请参阅 jquery animate page 中的动画函数签名参数.

其次，动画完成后，会将 CSS 覆盖样式改回可见，您可以通过添加代码来解决这个问题，将覆盖的 CSS 样式更改为隐藏到当动画完成，像这样:

var animateOptions = {
    queue: false,
    duration: 2000,
    complete: function() {
      $(this).css("overflow", "hidden");
    }
};
$(".home-sidewidt").animate({height:"200px"}, animateOptions);

正如我所提到的，所有这些代码都在 plunker 中进行了详细说明，我希望它接近您正在寻找的内容，但至少应该很容易调整。我不得不更改动画中的一些高度，以便更容易在 plunker 中显示。 http://plnkr.co/edit/41eE6o?p=preview