Jitter in Jquery Accordion Implementation
Question
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?
2 answers
solution1
3 ACCPTED 2010-01-13 21:55:05
It seems I have a solution. Synchronize by pegging to an independent outside transition through the step callback. Here is a demo of the new method.
This was a real headache!
The javascript:
$.fn.accordion = function() {
return this.each(function() {
$container = $(this);
// Hijack handles.
$container.find("dt").each(function() {
var $header = $(this);
var $selected = $header.next();
$header
.click(function() {
if ($selected.is(":visible")) {
$selected
.animate({ height: 0 }, { duration: 300, complete: function() {
$(this).hide();
}
});
} else {
$unselected = $container.find("dd:visible");
$selected.show();
var newHeight = heights[$selected.attr("id")];
var oldHeight = heights[$unselected.attr("id")];
$('<div>').animate({ height : 1 }, {
duration : 300,
step : function(now) {
var stepSelectedHeight = Math.round(newHeight * now);
$selected.height(stepSelectedHeight);
$unselected.height(oldHeight + Math.round((newHeight - oldHeight) * now) - Math.round(newHeight * now));
},
complete : function() {
$unselected
.hide()
.css({ height : 0 });
}
});
}
return false;
});
});
// Iterate over panels, save heights, hide all.
var heights = new Object();
$container.find("dd").each(function() {
$this = $(this);
$this.css("overflow", "hidden");
heights[$this.attr("id")] = $this.height();
$this
.hide()
.css({ height : 0 });
});
});
};
$(document).ready(function() {
$("dl").accordion();
});
solution2
0 2010-01-13 13:40:43
It seems this has to do with the fact that the two parallel animations (one panel coming out and other moving out of the way) in the accordion are not synchronized.
Apparently there is no established way to synchronize animations in Jquery at the moment.
See here and here for more info.
Frustrating!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.