JQuery animation is bumpy at the beginning and end
This is my code (see fiddle here ):
$('div').on('click', function () {
$('.well')
.stop()
.animate({
height: "toggle",
opacity: "toggle"
});
});
I have bootstrap .well
with below stuff. Notice the breaks at the beginning and end of the animation by looking at the below.
How can I avoid these animation breaks?
source to share
check this 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 div well
has both text height and padding. When toggling opacity and height, firstly, the content height is zero, that's padding. what makes this jump.
To avoid this, make sure the div you are applying .animate
has no margins / paddings.
source to share
There's a slight bump in there because you animate the content height and don't draw the outside height onto it.
This means that the values padding
, border
and margin
will be removed as soon as the item display
is toggled. That is, immediately after the end of the animation when it is hidden or animation when it is shown.
You should use instead .slideToggle()
.
$('div').on('click', function () {
$('.well').stop().animate();
});
source to share