Jumpy Animation

JavaScript
1

I’m reading the jQuery Novice to Ninja book and I’ve run into a problem. On page 58 the author has us create “bouncy content panes” and warns us that if the animation looks “jumpy” to remove all margins from elements next to the one that is to be animated. However, I’ve removed all relevant margins and still my animation is jumpy. It’ll get to about a quarter of the way through the sequence and then finish abruptly.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Bouncy Content Panes</title>
		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.color.js"></script>
        <script type="text/javascript" src="jquery.easing.js"></script>
		<script type="text/javascript" src="bouncy_content_panes.js"></script>
	</head>

	<body>
		
        <div id="bio">
        	<h3>Section 1</h3>
            <div>
            	<img src="img.png" width="100" height="100" alt="image placeholder" />
            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis felis velit. Nam ipsum lorem, vulputate ac mattis sed, tincidunt aliquam augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse varius nulla dictum velit accumsan ultrices posuere augue eleifend. Fusce euismod, ipsum in adipiscing bibendum, massa nulla cursus augue, at ultrices felis arcu eget tortor. Vivamus consequat, mauris nec varius euismod, ipsum augue aliquam nulla, a tincidunt orci neque at mauris. Cras dapibus justo id nisi convallis euismod. Donec ante dolor, scelerisque non dignissim eu, fringilla in tellus. Phasellus sit amet ligula eros, non tristique massa. Duis id tortor nec erat rhoncus ultrices non sed ipsum. Cras facilisis augue et leo pretium blandit. Vivamus rhoncus augue et tellus scelerisque at rhoncus tellus feugiat. Duis dictum sodales justo, ac pulvinar nisi dictum nec. Donec ac orci non ante imperdiet volutpat. Duis et mi vulputate erat vestibulum placerat. Vestibulum sapien ipsum, viverra vitae sodales non, feugiat id sapien. Sed luctus vestibulum magna sed fringilla. Ut in dui vel diam dapibus tempus.</p>
            </div>
            
            <h3>Section 2</h3>
            <div>
            	<img src="img.png" alt="image placeholder" />
            	<p>Fusce sed velit justo. Nullam consectetur iaculis sem, vitae hendrerit elit bibendum consequat. Nullam nisi ante, placerat fermentum euismod eu, elementum quis nisi. Quisque accumsan pulvinar lectus, volutpat mattis tortor posuere sed. Sed ultrices, risus vel vulputate placerat, dui dui lobortis tellus, non tristique neque sapien in libero. Donec eget felis bibendum nunc mattis ultricies. Curabitur in tellus a quam pellentesque vehicula. Nam eleifend velit elit. Phasellus ultrices diam ac risus consectetur hendrerit tempor mi interdum. Praesent vitae dui ut felis molestie scelerisque ac nec justo. Suspendisse id enim at mi tincidunt rutrum vel sit amet nulla. Donec in mi nibh, venenatis cursus metus. Donec risus quam, accumsan et ultricies at, hendrerit sit amet eros. Duis dictum vulputate mattis. Praesent imperdiet dapibus suscipit. Suspendisse potenti. Suspendisse potenti. Aenean commodo eleifend dui, ac mattis quam pellentesque at. Aliquam consequat sollicitudin sem dapibus pretium. Maecenas vulputate diam id lectus rhoncus laoreet.</p>
            </div>
            
            <h3>Section 3</h3>
            <div>
            	<img src="img.png" alt="image placeholder" />
            	<p>Phasellus et feugiat mi. Aliquam varius tortor a lectus tristique ut mattis leo rutrum. Phasellus a nunc eget risus varius accumsan. Ut libero lorem, porta vel pellentesque ut, gravida dignissim neque. Proin luctus gravida quam eu laoreet. Duis lacinia leo pellentesque enim tempor sed viverra magna volutpat. Nulla facilisi. Nullam magna nulla, euismod nec ornare non, consequat et massa. Sed quis purus sapien, eu dictum elit. Pellentesque sodales, lacus eu varius lacinia, nunc nisl volutpat orci, ac tincidunt erat dui ac enim. Integer sodales porta quam id faucibus. Praesent augue lorem, viverra eget lacinia ac, eleifend quis justo. Donec gravida, risus eget ultricies vestibulum, augue nibh pretium neque, quis molestie mi ligula et eros.</p>
            </div>
		</div>

	</body>
</html>



body {
	font: 100%/1.4 Verdana,Tahoma,sans-serif;
	margin: 20px;
}

#bio {
	width: 450px;
}

#bio h3 {
	background-color: #6CF;
	border-bottom: 1px solid #fff;
	margin: 0;
	padding: 5px;
}

#bio h3:hover {
	cursor: crosshair;
}

#bio img {
	float: left;
	margin: 10px;
}

#bio > div {
	background-color: #F4F4EE;
	margin: 0;
	overflow: hidden;
	/*height: 600px; if I include this then the animation runs smoothly. */
}

#bio p {
	margin: 10px;
}



$(document).ready(function(){
  $('#bio > div').hide();
  $('#bio > div:first').show();
  $('#bio > h3').click(function(){
  	$(this).next().animate({
		'height':'toggle'
   	}, 'slow', 'easeOutBounce');
  });
});

I’ve found that if I set a height on the #bio > div elements that the animation then runs smoothly. But I’d rather not have to do that. Or do I have to? What am I doing wrong? Is there a better way that I don’t know about?

Thanks for your help.