如何當span7和span5顯示隱藏在引導時動畫

Question

我有Bootstrap佈局與span7和span5（在span12內）。我想隱藏span7和展開span5作爲span12當一個按鈕點擊平滑動畫。同樣，按下sam按鈕，span7和span5都應顯示。如何實現此目的？內部內容也應該根據父跨度靈活。

<div id="summary-content" class="contentbar-main" style="display:none;"> 
            <div class="container-fluid"> 
             <div class="row-fluid"> 
              <div class="span12"> 
               <div class="row-fluid no-space"> 
                <div class="span7" id="sidebarid"> 
                 <div class="myh4">My Summary</div> 
                 <br> 
                 <div id="summaryTableId"></div> 
                </div> 
                <div class="span5" id="contentbarid"> 
                 <div class="row-fluid"> 
                  <div class="span12"> 
                   <div> 
                    <span class="summary-left-hide-arrow" id="toggle-button"></span> 
                    <span class="myh4">Map</span> 
                   </div> 
                    <br> 
                   <div id="#map-canvas" style="width:100%;height:400px;"></div> 
                  </div> 
                 </div> 
                 <div class="row-fluid"> 
                  <div class="span12"> 
                   <br> 
                   <div class="myh4">Time Sheet</div><br> 
                   <div id="newTableId"></div> 
                  </div> 
                 </div> 
                </div> 
               </div> 
              </div> 
             </div> 
            </div> 

Answer 1

假設這是一個按鈕，做了的HTML：

<a href="#" id="hideSpan">Hide Span</a> 

那麼下面的jQuery應該做的伎倆（把它放在你的document.ready函數中）

$('#hideSpan').click(function() { 
    $('#sidebarid').removeclass('span7').addClass('hidden'); 
    $('#contentbarid').removeclass('span5').addClass('span12'); 
}); 

您需要將下面的CSS添加到您的頁面太

.hidden { display: none; } 

UPDATE：忽略前面例子中的添加和刪除類，這應該提供一個平滑的動畫。

$('#hideSpan').click(function() { 
    $('#sidebarid').hide(1000); 
    $('#contentbarid').animate({width: '100%'}, 1000); 
});