请查看http://jsbin.com/omuqo有关此问题的演示。
当您通过单击 handle 打开面板时，下方的面板在整个动画过程中会轻微抖动。
在演示中，下面的面板应该保持完全静止，因为所有面板的高度都相同。如果您有一个更复杂的 Accordion 面板，其中面板的高度不同，添加缓动等，抖动仍然以各种方式可见。
为了调试，我放弃了 Jquery UI 中的 Accordion 插件并实现了我自己的插件，遵循建议 here .
如果 jsbin 不工作，这里是完整的代码。
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:
$.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();
});
要查看 Accordion 的流畅实现，请查看 Muxtape 的主页.
有什么建议吗？
最佳答案
看来我有办法了。通过步骤回调与独立的外部转换 Hook 进行同步。 Here是新方法的演示。
这真是令人头疼!
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();
});
关于javascript - Jquery Accordion 实现中的抖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2056685/