2011-03-17 172 views
1

這是「抖動jQuery的手風琴實施」JQuery的手風琴抖動問題

Problem-後續後當你按一下手柄打開面板時,略低於抖動面板在整個動畫。

預期結果 - 由於所有面板高度相同,因此下面的面板應該保持完全靜止。如果您有更復雜的面板高度不等的手風琴,請添加緩動等等,抖動仍然以各種方式顯示。

原始海報表明,沒有確定的方法來同步Jquery中的動畫。這個問題與手風琴中的兩個平行動畫(一個面板出來和其他移動方向)不同步的事實有關。

該解決方案不使用Accordion JQuery插件。 它通過掛鉤到通過步驟回調的獨立外部轉換來提供自定義同步。 http://jsfiddle.net/NinjaSk8ter/mWENu/

我可以複製無抖動的行爲在這裏:http://jsfiddle.net/NinjaSk8ter/Jv8Ta/
但是如果我有任何類型的填充的答案包裝設定的,有抖動。

回答

0

答案類從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} 
+0

請編輯您的問題或開始一個新的問題。 – LostLin 2011-03-18 01:57:16