JQuery Accordion Jitter Issue

Question

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.

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.

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/

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.

Answer 1

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}