Jquery手风琴实现中的抖动 [英] Jitter in Jquery Accordion Implementation
问题描述
请查看 http://jsbin.com/omuqo 以获得此问题的演示.
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.
这是jsbin无法正常运行的完整代码.
Here's the complete code should jsbin not work.
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>
和Javascript:
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();
});
要查看平滑的手风琴实施方式，请查看 Muxtape 的主页.
To see a smooth accordion implementation, check out the homepage of Muxtape.
有什么建议吗?
推荐答案
似乎我有解决方案.通过逐步回调与一个独立的外部转换进行固定来进行同步. 此处是新方法的演示.
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.
这真是头疼！
javascript:
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();
});
这篇关于Jquery手风琴实现中的抖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
