Question

这是我的代码（请参阅小提琴here）：

$('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"
    });
});

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

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

Answer 2

有一个小小的启动，因为你动画内容的高度并忽略它的外部高度。

这意味着，一旦元素的padding被切换，border，margin和display值就会启动。也就是说，动画完成后立即隐藏它或动画已经开始显示它。

您应该使用.slideToggle()代替。

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

jQuery在开始和结束时都是颠簸的

2 个答案: