Javascript jQuery在开始和结束时设置凹凸动画

这是我的代码（参见fiddle）：

我有一个bootstrap

。好的

和下面的东西。通过查看下面的内容，注意动画开始和结束处的不连续性

如何避免这些动画中断？

请查看以下内容：

html:

<div>Click to show/hide</div>
<div class='container'>
    <div class='well'>....</div>
</div>
<div>Stuff below</div>

$('div').on('click', function () {
    $('.container')
        .stop()
        .animate({
        height: "toggle",
        opacity: "toggle"
    });
});

代码的问题在于

well

div同时具有文本高度和填充。切换不透明度和高度时，首先，内容高度为零，即填充。这就是为什么要跳

---

为了避免这种情况，请确保应用

.animate

的div没有边距/填充。

因为您正在设置内容高度的动画，而忽略了内容的外部高度，所以会有一个小的影响

这意味着一旦切换元素的

显示

，

边框

和

边距

值，将立即生效。也就是说，在隐藏动画时动画已经完成，或者在显示动画时动画已经开始

你应该改用

$('div').on('click', function () {
    $('.container')
        .stop()
        .animate({
        height: "toggle",
        opacity: "toggle"
    });
});

$('div').on('click', function () {
    $('.well').stop().animate();
});