javascript - jQuery动画在开始和结束时颠簸

Question

这是我的代码（请参见此处的小提琴）：

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

我有一个.well带有以下内容的引导程序。通过查看下面的内容，请注意动画开始和结束处的不连续性。

如何避免这些动画不连续性？

Answer 1

看看这个http://jsfiddle.net/dLVWr/1/：

html:

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

js：

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

您的代码的问题是welldiv 同时具有文本高度和填充。当切换不透明度和高度时，首先，内容高度为零，即填充。这就是跳跃的原因。

为避免这种情况，请确保您应用的 div.animate没有边距/填充。

Answer 2

有一个小插曲，因为您正在为内容的高度设置动画而忽略它的外部高度。

这意味着一旦元素被切换padding， ,border和值就会生效。也就是说，在动画完成后隐藏它或动画在显示时开始。margindisplay

你应该.slideToggle()改用。

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