Jquery手风琴实现中的抖动

请查看http://jsbin.com/omuqo以获取此问题的演示。

当您通过单击手柄打开面板时，下面的面板会在整个动画中略微抖动。

在演示中，由于所有面板的高度相同，因此下面的面板应保持完全静止。 当你有一个更复杂的手风琴与不同高度的面板，添加缓和等，抖动仍然可以通过各种方式可见。

为了调试，我已经在Jquery UI中抛弃了手风琴插件并按照这里的建议实现了我自己的插件。

这里是完整的代码应该jsbin不起作用。

HTML：

      * { 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; }     
 
Handle
 
Content
 
Handle
 
Content
 
Handle
 
Content
 
Handle
 
Content
 
 
 Some more content 
   

和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的主页。

任何建议？

Answer 1

看来我有一个解决方案。 通过步骤回调挂钩到独立的外部转换同步。 这是新方法的演示。

这真是令人头痛！

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")]; $('
').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(); }); 

Answer 2

这似乎与手风琴中的两个平行动画（一个面板出来和其他移动）不同步这一事实有关。

显然，目前还没有确定的方法来同步Jquery中的动画。

有关详细信息，请参阅此处和此处 。

令人沮丧！