[UPDATED: Wednesday, April 22, 2009 at 8:43:54 AM]
I was working on some code today and was using the jQuery slideDown() and slideUp() effects and was running into an issue if the height of my box wasn't greater than certain height. As the box would slideDown, I'd see this jump in the animation as the height originally grew too large, so when the animation finished and it would go to the original height, I'd see this "jumping" effect.
Remembering that I read a recent post by Remy Sharp on the subject, a quick Google search brought up Remy's SlideDown Animation Jump Revisited post.
This turned out to be the same issue I was experiencing. Since I needed a little more generic version of Remy's code, I modified his original source to come up with this workaround:
// this is a fix for the jQuery slide effects function slideToggle(el, bShow){ var $el = $(el), height = $el.data("originalHeight"), visible = $el.is(":visible"); // if the bShow isn't present, get the current visibility and reverse it if( arguments.length == 1 ) bShow = !visible; // if the current visiblilty is the same as the requested state, cancel if( bShow == visible ) return false; // get the original height if( !height ){ // get original height height = $el.show().height(); // update the height $el.data("originalHeight", height); // if the element was hidden, hide it again if( !visible ) $el.hide().css({height: 0}); } // expand the knowledge (instead of slideDown/Up, use custom animation which applies fix) if( bShow ){ $el.show().animate({height: height}, {duration: 250}); } else { $el.animate({height: 0}, {duration: 250, complete:function (){ $el.hide(); } }); } }
UPDATE 2009-04-22:
- Added check so that if requested toggle state is the same as current state, no animation occurs
While I could have written this as a plug-in, I kept it as a function—mainly because this issue should be fixed in the jQuery core soon (if it's not fixed already in the SVN repository.)
To use the solution, just pass in a selector to a unique element (such as "#element-id") as the first argument. The second argument is optional and can be used to force the direction. Use true to force it to slideDown() or false to force it to slideUp(). If the argument is left off, it'll toggle the state of the element.
Anyway, thanks to Remy for figuring out this issue. I'm sure I would have spent way more time tracking down the glitch if it weren't for the fact that I remember reading this when he posted the solution.
NOTE:If you're element changes dynamically changes height, this solution won't work for you—because it stores the original height and always uses that. You could workaround that by using the data() method to kill the stored height (i.e. $("#your-element").data("originalHeight", null).)