jQuery手风琴抖动问题 [英] JQuery Accordion Jitter Issue

问题描述

这是"Jquery手风琴实现中的抖动"的后续帖子

This is a follow-up post of "Jitter in Jquery Accordion Implementation"

问题-通过单击手柄"打开面板时，整个动画下方的面板都会出现轻微抖动.

Problem- When you open a Panel by clicking on the Handle, Panels below slightly Jitter throughout the Animation.

期望的是-由于所有面板的高度均等，因此下面的面板应完全保持静止.当您使用具有不同高度的面板的更复杂的手风琴，添加缓动等时，仍然可以通过各种方式看到抖动.

What is expected- 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.

原始海报表明Jquery中没有建立同步动画的方法.这个问题与手风琴中的两个平行动画(一个面板出来，另一个面板走开)不同步这一事实有关.

The Original Poster indicated that there is no established way to synchronize animations in Jquery. The problem has to do with the fact that the two parallel animations (one panel coming out and other moving out of the way) in the accordion are not synchronized.

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

This solution does not utilize the Accordion JQuery Plugin. It provides custom synchronization by pegging to an independent outside transition through the step callback. http://jsfiddle.net/NinjaSk8ter/mWENu/

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

I can replicate the jitter-free behavior here: http://jsfiddle.net/NinjaSk8ter/Jv8Ta/
However if I have any type of Padding set for the answer wrapper, there is Jitter.

推荐答案

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

The answer class was ommitted from the JSFiddle example. Once this was added, the padding that was set was causing the Jitter Reaction.

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

This brings up yet another Problem because I need to add padding or width in between each of the Answer Anchor Tags. Any suggestions?

.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手风琴抖动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！