jQuery slideToggle jumps around

Question

I\'m using the jQuery slideToggle function on a site to reveal \'more information\' about something. When I trigger the slide, the content is gradually revealed, but is loc

Answer 1

Accidentally I think that the easiest to use solution is to add custom function to jQuery with animate padding/margin-top/bottom too.

//this function is to avoid slideToggle jQuery jump bug.
$.fn.slideShow = function(time,easing) { return $(this).animate({height:'show','margin-top':'show','margin-bottom':'show','padding-top':'show','padding-bottom':'show',opacity:1},time,easing); }
$.fn.slideHide = function(time,easing) {return $(this).animate({height:'hide','margin-top':'hide','margin-bottom':'hide','padding-top':'hide','padding-bottom':'hide',opacity:0},time,easing);  }

And useage example:

$(this).slideShow(320,'easeOutQuart');
$(this).slideHide(320,'easeOutQuart');

My example animated opacity toggle tu, you can modify it as you need.