Question

This is my code (see fiddle here):

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

I have a bootstrap .well with stuff below. Notice the discontinuity at the start and the end of the animation by looking at the stuff below.

How can I avoid these animation discontinuities?

Answer 1

check this out 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"
    });
});

The problem with your code is that the well div has both text-height and padding. When toggling opacity and height, first, the content height is zeroes, that the padding. that’s what makes that jump.

To avoid this make sure that the div you apply the .animate to has no margins/paddings.