JQuery手风琴抖动问题答案

【问题标题】：JQuery Accordion Jitter IssueJQuery手风琴抖动问题
【发布时间】：2011-03-17 20:58:41
【问题描述】：

这是“Jquery Accordion 实现中的抖动”的后续帖子

问题 - 当您通过单击句柄打开面板时，下方的面板在整个动画过程中会轻微抖动。

预期结果 - 下方面板应保持完全静止，因为所有面板的高度相同。当您有一个更复杂的 Accordion 以及不同高度的面板、添加缓动等时，抖动仍然以各种方式可见。

原始海报指出，在 Jquery 中没有既定的方式来同步动画。问题与手风琴中的两个平行动画（一个面板出来，另一个移开）不同步有关。

此解决方案不使用 Accordion JQuery 插件。它通过步骤回调与独立的外部转换挂钩，从而提供自定义同步。 http://jsfiddle.net/NinjaSk8ter/mWENu/

我可以在这里复制无抖动行为：http://jsfiddle.net/NinjaSk8ter/Jv8Ta/
但是，如果我为答案包装器设置了任何类型的填充，就会出现抖动。

【问题讨论】：

标签： jquery css

【解决方案1】：

JSFiddle 示例中省略了答案类。添加后，设置的填充将导致抖动反应。

这又带来了另一个问题，因为我需要在每个答案锚标记之间添加填充或宽度。有什么建议吗？

.answer {
    background-color: #F9FBFC;
    /*padding: 2px 5px 0;*/
    width: 525px;
}


<div id="galColumn">
    <div class="contentbox">
        <dl> 
            <dt class="factterm">
                <a id="A1" href="javascript://" class="questionLink">Question1</a>
            </dt> 
            <dd id="1" class="answer">
                <div class="indent-box">
                    Answer1
                </div>
            </dd> 
        </d1>
    </div>
</div>

#galColumn {
    background-color: #E4EAEF;
    padding: 10px;
}
.contentbox {
    /*height:260px;*/ 
    /*width:536px;*/ 
    /*padding:3px 7px 0 7px;*/
    padding:10px;
    margin:0 0 0 0;
    position:relative;   
}
.indent-box {
    padding: 5px;
}
.factterm {
    /*margin-top: 2px;*/
    /* padding: 2px 5px 0;*/
    /*width: 525px;*/
}
.answer {
    background-color: #F9FBFC;
    /*padding: 2px 5px 0;*/
    width: 525px;
}
#accordion .handle{     
    width: 260px;     
    height: 30px;     
    background-color: orange; 
} 
#accordion .section {     
    width: 260px;     
    height: 445px;       
    overflow: hidden;     
    position: relative; 
} 
.active {background:#a9a9a9}

【讨论】：