缓动动画突然捕捉

Question

我正在处理链接单击以展开链接下方的隐藏 div 层。我正在使用“easeOutBounce”，它看起来很棒。问题是当我单击链接以将 div 恢复到隐藏状态时。当它在做动画时，有一个白色区域（div 所在的位置），下面的 div 突然回弹。我想缓解它推动的 div 。我希望这是有道理的。

$(".launch-search").click(function () {
    $('.search-container').toggle('slide', {
        duration: 1000,
        easing: 'easeOutBounce',
        direction: 'up'
    });
});

这是示例问题的 JSFiddle。请注意搜索容器下方的白色大间隙，以及蓝色框与顶部的硬对齐。

http://jsfiddle.net/0wj2g3jm/6/

Answer 1

您可以使用animate，而不是使用slide，如下所示：

$(".launch-search").click(function () {
    $('.search-container').animate(
     { height: "toggle" }, {
     duration: 'slow',
     easing: 'easeOutBounce'
    });
});

查看fiddle。希望对你有帮助。。