jQuery slide is jumpy

Question

I tried to slide in and out a DIV with the toggle function of jQuery but the result is always jumpy at the start and/or end of the animation. Here\'s the js code that I use:

Answer 1

css padding and jquery slideToggle doesn't work well together. Try to box out padding.

Answer 2

Try setting the 'position' property of the the container (in this case the .notice div) to 'relative'.

Worked for me. Source: slideToggle height is "jumping"

Answer 3

Try removing all CSS margins from all the elements. Usually jerky animation comes from margins not being taken into account by the animation framework.

Answer 4

For me removing the min-height from my container solved the problem.

Answer 5

I noticed if you have a <br /> after your container <div> the animation will also be jumpy. Removing this resolved my problem.

Answer 6

The problem is that you are performing the action on the parent, doing this removes the CSS related to that element.

You need to run the slide on your note1, not the parent of note 1.

I had the same issue and fixed it by moving down a level.