Question

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

当鼠标悬停事件发生时，我运行以下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");
            }
        });

这会将列表的高度扩展为1200px，并让用户选择他们想要的内容。当用户在页面上的任何其他位置单击容器时，我运行以下命令：

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

这使容器的高度恢复到400px。

现在这两段代码似乎都工作了，除非用户点击列表后它再滑回400px，大约3/4秒后它会回滚到1200px。回滚前的持续时间与动画中指定的大致相同，我认为“打开列表”动画再次运行，但调试时似乎不是这样。

我已经进行了实验，如果我点击页面（不是列表）2到3次等待，那么列表重新展开与我点击的次数直接相关。即如果我点击2次，则需要大约8秒，3次12秒等。这是动画持续时间的倍数。

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

问候，sapatos

Answer 1

我把你把它放在一个包含解决方案的plunker中： http://plnkr.co/edit/41eE6o?p=preview

要改变的第一件事，你应该使用不同的函数签名来设置animate使用queue：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

jquery animate函数工作，然后反转它的变化

1 个答案: