Please check out http://jsbin.com/omuqo for a demo of this issue.
When you open a panel by clicking on the handle, panels below slightly jitter throughout the animation.
In the demo, the below panels should remain completely still since all panels are of equal height. When you have a more complex accordion with panels of varying height, add easing, and so on, the jitter is still visible in various ways.
To debug, I've ditched the accordion plugin in Jquery UI and implemented my own, following the advice here.
Here's the complete code should jsbin not work.
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
* { margin: 0; padding: 0; }
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
dt { background-color: #ccc; }
dd { height: 100px; }
#footer { background-color: #ff9; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<dl>
<dt>Handle</dt>
<dd id="1">Content</dd>
<dt>Handle</dt>
<dd id="2">Content</dd>
<dt>Handle</dt>
<dd id="3">Content</dd>
<dt>Handle</dt>
<dd id="4">Content</dd>
</dl>
<div id="footer">
Some more content
</div>
</body>
</html>
And the Javascript:
$.fn.accordion = function() {
return this.each(function() {
$container = $(this);
// Hijack handles.
$container.find("dt").each(function() {
var $header = $(this);
var $content = $header.next();
$header
.click(function() {
$container
.find("dd:visible")
.animate({ height: 0 }, { duration: 300, complete: function() {
$(this).hide();
}
});
if(!$content.is(":visible")) {
$content
.show()
$content
.animate({ height : heights[$content.attr("id")] }, { duration: 300 });
}
return false;
});
});
// Iterate over panels, save heights, hide all.
var heights = new Object();
$container.find("dd").each(function() {
$this = $(this);
heights[$this.attr("id")] = $this.height();
$this
.hide()
.css({ height : 0 });
});
});
};
$(document).ready(function() {
$("dl").accordion();
});
To see a smooth accordion implementation, check out the homepage of Muxtape.
Any advice?