缓和动画突然捕捉

Question

我正在处理 link 单击以展开 link 下方的隐藏 div 层。我正在使用 'easeOutBounce'，它看起来很棒。问题是当我单击 link 将 div 缓和回隐藏状态时。当它正在做它的动画时，有一个白色区域（div 所在的位置），下面的 divs 突然回弹。我想缓和在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。希望对你有帮助..

缓和动画突然捕捉

Easing animation snaps abruptly

html

jquery

animation

easing