Question

我认为在动画调整大小期间有一种简单的方法可以使容器高度变得流畅，但如果是这样的话我就会忘记。在我以编程方式进行之前，我想我会在这里测试我的运气。

我们的想法是，<hr />底部#content应优雅地向上/向下移动，因为#container是动画，而不是在动画后捕捉到位 - 这是由{{1}引起的没有调整大小。

HTML：

<button id="trigger">trigger</button>
<hr />
<div id="container">
    <div id="content">foo
        <br />foo
        <br />foo
        <br />foo
        <br />foo
        <br />
    </div>
</div>
<hr />

JS：

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

Answer 1

您是否可以使用slideToggle调整容器大小以达到此效果？

<强>的jQuery

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

JSFiddle example.

Answer 2

Fiddle

认为有一个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');
    }
});

在隐藏/显示动画上展开/收缩容器

2 个答案: