SlideToggle imperfections

Question

My slideToggle is a little jumpy at the bottom of the slide transition. Could that be because there is a button there or something. Any way to make it smoother. Tried using easing but not very successful. Any suggestions

click on video setup to see for yourself The site

$(document).ready(function() {
  $('.drop').click(function() {
    $(this).parent().next('li.drop_down').slideToggle();
    return false;
  });
});

Answer 1

Give your li.drop_down a fixed width. This should clear it up. I don't remember the exact reason for this, but I just tested it on your site, and it works.

Right now the computed width is 217px so try that.

.drop_down {
    width: 217px;
}

EDIT: Looks like you have a .drop_down2 and a .drop_down3 as well (maybe more). You would need to do the same for those. I'd suggest assigning a common class for each.

Answer 2

Try storing the height of each item before animating it, and then re-apply that height to the element just before starting the hiding animation.

Here's an article I wrote how with an example of doing this: http://www.pewpewlaser.com/articles/jquery-smooth-animation