Javascript 隐藏/显示动画时展开/收缩容器

我认为有一种简单的方法可以在动画调整大小期间使容器高度流动，但如果是这样，我已经忘记了。在我以编程的方式进行之前，我想我应该在这里测试一下自己的运气

这个想法是，底部

应该随着

#内容

的动画化而优雅地向上/向下移动，而不是在动画化后捕捉到位-这是因为

#容器

没有调整大小

HTML:

---

您是否可以使用

slideToggle

调整容器大小以实现此效果

jQuery

$('#trigger').on('click', function() {
  var $content = $('#content');
  $content.slideToggle(1000);
});

我以为会有一个CSS解决方案。相反，它看起来像是动画作品；但是，它是一个简单的滑动/淡入，并且不使用

drop

：

$('#trigger').click(function () {
    var $content = $('#content');
    if (!$content.hasClass('hidden')) {
        $content.stop(true,true).animate({height:'hide',opacity:'hide'},'slow','easeInQuad');
        $content.addClass('hidden');
    } else {
        $content.stop(true,true).animate({height:'show',opacity:'show'},'slow','easeInQuad');
        $content.removeClass('hidden');
    }
});

---

好问题，但不是，

滑动切换

没有相同的淡入效果。此外，

hr

用于演示，代替下面的元素；其他内容自然会取代

hr

Cool，然后我将删除另一个示例。那么你想做两件事？1） 从原始演示中淡入淡出效果，2）调整容器大小，使容器后的元素与之一起动画化。每当我开始设计时，我喜欢有选项，让最终用户最终输入最佳内容。为了实现这一点，如果这适用于任何动画，那将是理想的——想象一下左浮动的内容和从右到左的动画。在这种特殊情况下，

slideToggle

可能是一种很好的回退方式，但是

swing

或

drop

将是理想的选择。我认为我以前已经解决了这个问题，所以我必须研究我的代码库，也许我链接了动画，或者在这个过程中进行了回调。我问这个问题是因为我认为这是一个简单的CSS解决方案。如果你找到了，我很想看看你的答案。我对

.hide（）

的挑战是，它不影响高度，而影响元素的y坐标（在您的特定应用程序中），因此您需要一个容器。当然，一旦将其从视图中删除，它将显示一个

显示：none

，因此链接

幻灯片切换

，或对

内容的后续效果将是无用的。因此，您对容器有了一些了解，因为动画应该随后在
container
上出现。这里是CSS（正在工作？），但您需要为容器类设置硬编码的高度，否则转换将不会触发：
$('#trigger').on('click', function() {
  var $content = $('#content');
  $content.slideToggle(1000);
});

$('#trigger').click(function () {
    var $content = $('#content');
    if (!$content.hasClass('hidden')) {
        $content.stop(true,true).animate({height:'hide',opacity:'hide'},'slow','easeInQuad');
        $content.addClass('hidden');
    } else {
        $content.stop(true,true).animate({height:'show',opacity:'show'},'slow','easeInQuad');
        $content.removeClass('hidden');
    }
});