Question

我遇到了一些jQuery动画的问题。我设法使我的弹性侧边栏滑动得很好，但我有一些滑出效果的问题。滑出功能使侧边栏立即消失。

另外，我相信我需要hide（）和show（）函数，因为只有min / max-width，侧边栏会使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画布太高而没有调用hide（）函数。 https://jsfiddle.net/soq6webp/1/

提前感谢帮助=）

Answer 1

删除.hide（）

即时让它们消失并弄乱你的动画。

- 编辑：在我们在评论中交换之后，我得出的结论是，鉴于你的情况，你可能无法做到你的想法，所以你可以做的是：

先滑出动画

然后显示内容

    $('#right').show().animate({ css to change here }, {
    duration: 1250,
    complete: function() {
        // once animation is over, run all the code in this block
    }

查看此JsFiddle

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

因此，我们为此匿名函数中的文本设置动画，以便在#right div上的动画结束后调用它。

我们在关闭按钮上做同样的事情，除了我们首先隐藏我们的文本，然后滑开div。

（注意CSS中的变化）

jQuery滑出问题

1 个答案: