jQuery滑出问题

Question

我对一些jQuery动画有一个问题。我设法使我的灵活的侧边栏在很大程度上，但我有一些问题的幻灯片外效果。滑出功能使侧边栏立即消失。

此外，我相信我需要隐藏()和显示()函数，因为只有最小/最大宽度的侧边栏使flex非常高。

我的滑出功能：

  $('#close-left').click(function(event){
        $('#left').animate({
            'min-width': '0px',
            'max-width': '0px',
        }, 1250).hide();

    });

    $('#close-right').click(function(event){
        $('#right').animate({
            'min-width': '0px',
            'max-width': '0px',
        }, 1250).hide();
    });

我做了一个快速的小提琴，产生了同样的问题：https://jsfiddle.net/89s5tsLr/

更新:在没有调用()函数的情况下，做了第二次演示，展示了右侧边栏是如何导致flex太高的。https://jsfiddle.net/soq6webp/1/

谢谢你的帮助

Answer 1

删除.hide()

这就是瞬间让它们消失并破坏你的动画的原因。

-编辑:在我们交换意见后，我得出的结论是，鉴于你的情况，你可能无法做你想做的事情，所以你可以做的是：

• 先滑出动画
• 然后显示内容 $('#right').show().animate({ css在此}，{css在这里更改)，{工期: 1250，完成:函数(){ //一旦动画结束，运行此块中的所有代码}

看看这个JsFiddle

传递给动画函数的第二个对象是options，其中一个已经完成，动画结束后调用代码。

因此，我们在这个匿名函数中动画文本，这样当#右div上的动画结束时，它就被调用了。

我们在关闭按钮上做同样的操作，除非我们先隐藏文本，然后滑动掉div。

(还请注意CSS中的更改)