如何当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); 
});