How to prevent JQuery slidetoggle stop "jumping"?

Possible symptoms:  

  • “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 located to the right by about 100 pixels until the end of the animation when it suddenly jumps to the correct position.”
  • “Can anybody tell me why my boxes "jump" when i open them? The first half they slide, the rest they "jump"??”
  • “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.”

In my particular scenario here is my problem:
In a resent prototype I use JQuery slidetoggle function to hide/show a list of items all inside of a parent <div>, the slidetoggle animation works almost fine just that at the end of it, suddenly the animation jumps and recalculate the correct height of the parent <div>, weird doesn’t it?
 

My CSS

CSS style of the div element (container)
.element {
    border-bottom: 1px solid #CCCCCC;
    padding-top: 5px;
    width: 100%;
}

CSS style of div parent
.items {
    position: relative;
}

CSS style of each item
.item {
    background-color: #FAFAFA;
    border-color: #DDDDDD;
    border-style: solid;
    border-width: 1px;
    margin-left: 30px;
    margin-right: 5px;
    padding: 2px;
}

 
My HTML

HTML
<div class="element">
	<div class="divTitle"> </div>
	<div style="clear:both;"></div>
	<div class="numElements">2 element(s)</div>
	<div style="clear:both;"></div>
	<div class="items" style="display:none;"> <!-- parent div that "jump" -->
		<div class="item"> <!-- an item -->
			<div class="itemAuthorImg"></div>
			<div>
				<div class="feedDate" style=""><strong>Joaquin Alonso Arellano Ramirez</strong>- 2012-10-03T20:56:41.400Z</div>
				<div class="feedTxt"> wdwqdw efewf fsfewfew </div>
			</div>
		</div> <!-- close item div -->
		<div class="item"> <!-- other item -->
			<div class="itemAuthorImg"></div>
			<div>
				<div class="feedDate" style=""><strong>Joaquin Alonso Arellano Ramirez</strong>- 2012-10-03T20:56:41.400Z</div>
				<div class="feedTxt"> wdwqdw efewf fsfewfew </div>
			</div>
		</div> <!-- close item div -->
	</div> <!-- close parent div -->
	<div style="clear:both;"></div>
</div>


 My JavaScript

JQuery slidetoggle code
$j(".numElements").live("click",function () {
	$j(this).parent().find(".items").slideToggle("slow");
});


Still little confuse about the problem, ok, me too!... here is a link to a video that shows the “jump” bug and one of the possible solutions.

http://jqueryfordesigners.com/video.php?f=animation-jump2.flv

That option works, but you need “create” the slidetoggle function by hand, if you don’t want to type extra JS code, here is what you can try first (works in my case):

  • Add in your CSS rule or in the style property of the div (the parent div that holds old all the elements) a fix width size in pixels, e.g.: width: 300px; (line 6 in my example)
    • C ould not be the best solution for a nice responsive web design, but works.
  • OR, instead you can add in your CSS rule or in the style property of the div (the parent div that holds old all the elements) a fix width size in percent (%), e.g.: width: 100%; (line 6 in my example)
    •  In my opinion is a better solution for a nice responsive web design and you don´t need to add extra JS code lines.

Update

I have created a new post: How to prevent jQuery slidetoggle stop “jumping”? – Part II where I have documented a new solution I have found, in this new scenario none of the above solutions that I had found and shared worked this time.

The new solution involves using the CSS max-height property, check it and see if works in your code.

I hope it is useful!!

About the author

Enterprise Web Developer
Joaquin is an Enterprise Web Developer at Base22 with over seven years of experience designing and developing web solutions for enterprise clients. He is a well rounded web developer with skills building interfaces in IBM WebSphere Portal and WCM, IBM Connections, and many others. He is an Oracle Certified Java Developer and a Microsoft Certified Visual Studio Developer. He blogs at http://j-arellano.com