Question

这是“Jquery手风琴实施中的抖动”的后续帖子

问题 - 当你通过点击Handle打开一个Panel时，整个动画中的面板略微抖动。

预期结果 - 由于所有面板的高度相同，所以下面板应保持完全静止。如果你有一个更复杂的Accordion，面板的高度不同，添加缓动等等，抖动仍然可以通过各种方式显示。

原始海报表明，没有确定的方法来同步Jquery中的动画。这个问题与手风琴中的两个平行动画（一个面板出来，其他面板移开）不同步这一事实有关。

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

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

Answer 1

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

这引出了另一个问题，因为我需要在每个Answer Anchor标签之间添加填充或宽度。有什么建议吗？

.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}

JQuery手风琴抖动问题

1 个答案: