用jquery扩展一个div [重复]

Question

我找到了这个小提琴并复制以匹配我的代码：

http://jsfiddle.net/kapantzak/v5kmoy1p/

点击它会扩展 div .. 有没有办法为扩展设置动画并折叠？所以它不会发生得那么快

$('#click').click(function() {
    $('div.wrapper').find('div').toggleClass('small big');
});

感谢您的帮助！

Answer 1

一种方法是使用max-height 属性而不是height。

将元素的 max-height 设置为有限的值，然后将其设置为高于元素本身的值。

过渡效果由：

transition: max-height .5s;

演示：

$('#click').click(function() {
    $('div.wrapper').find('div').toggleClass('small big');
});

.wrapper div{
  transition: max-height .5s;
}

.small {
    max-height: 30px;
    overflow: hidden;
}
.big {
    max-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<a id="click" href="#">Click...</a>
</div>