0

Recently, I was writing code for a website template that required some element animation. Naturally, I decided to get my jQuery on and use some of its standard libraries to animate my div. In this case, I wanted to use the slideUp() function. When I coded it up and ran a trial, I noticed that the animation was very choppy, so I decided to look for clues here and on the internet and came up fairly short.

The question Div slideUp and slideDown animation choppy with inline-block display provided some hints, but nothing that I would end up actually using. So I am wondering: how have you dealt with this, per scenario, in the past? I will be posting an answer with the solutions I found to be helpful.

Community
  • 1
  • 1
Steven Mann
  • 558
  • 3
  • 14

1 Answers1

4

The Terrible min-height/min-width

The first and most common bug I have run into is the use of min-height or min-width. As noted here, it will cause the animation to be jumpy regardless of your standard height setting. Why does this happen?

Let's say you have a div that has a height of 75 pixels and a min-height of 50 pixels, and you wish to use some animation function that reduces the height of that div to zero (such as slideUp()) When the animation starts, it will begin to subtract from the total known height. When it reaches the set min-height, it will attempt to set the div height lower, but will not be able to and stick there until the display:none is added to the element's style, causing that presumed "choppy animation". It's not actually choppy: it's failing. If you were to run a standard animate() such as $("div").animate({ height:'0px' )}) on a div with a min height set (greater than 0), you would find that the animation simply sticks at the set min-height.

enter image description here

The solution to this problem is to simply unset any min-height for the div in css or to set min-height: 0; if the min-height is declared elsewhere.

The unfortunate no height/width

Another common bug is to simply set no height (or width, depending on the direction of the animation) on the object at all. This can cause the animation function to jump because of an incorrectly calculated height that it needs to adjust for. An unset width/height can have varying results and might succeed or fail depending on the DOM around and contained in it. It is best practice to set a height and width on any element one wants to animate. Percentage heights/widths are fine.

Padding/Margin Bloody Padding/Margin

You might run into a problem with choppy animations caused by collapsing padding/margins of the element you are attempting to animate, or any elements inside it. This is a simple problem fixed by adding a border: 1px solid transparent; to the element you are animating. This creates a bounding for jQuery to use so that it essentially ignores the collapsing padding/margins.

Community
  • 1
  • 1
Steven Mann
  • 558
  • 3
  • 14