使用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;

演示：

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;