如何用動畫移動跨度？

我正在使用twitter-bootstrap框架，我有兩個span4居中使用偏移類。我想要做的是做一個動畫去除偏移類，並拉伸跨度到右邊，把另一個span4結束。如何用動畫移動跨度？

我的意思是，做什麼，我在做this fiddle（看到的結果是更好地進入here）與兩個第一跨度的權利和淡入/淡出annimation與第三跨度的幻燈片動畫。

CSS

.span4 { 
    background: red; 
    text-align: center; 
    height: 400px; 
} 
.hidden{ 
    display:none !important; 
}

HTML

<div class="container"> 
    <div id="rowad" class="row-fluid"> 
     <div id="firstspan" class="span4 offset2">Hello 
      <button class="btn" id="addspan">Add SPAN</button> 
     </div> 
     <div class="span4">Stack</div> 
     <div id="spanhiden"class="span4 hidden">Stack</div> 
    </div> 
</div>

$(document).ready(function() { 
    $("#addspan").click(function() { 
     var textb = $(this).text(); 

     if (textb == "Add SPAN"){ 
      $("#firstspan").removeClass("offset2"); 
      $("#spanhiden").removeClass("hidden"); 
      $(this).text("Remove SPAN"); 
     }else{ 
      $("#firstspan").addClass("offset2"); 
      $("#spanhiden").addClass("hidden"); 
      $(this).text("Add SPAN"); 
     } 
    }); 
});

任何意見或幫助，將不勝感激。如果你需要更多信息，請告訴我，我將編輯帖子。

來源

2013-05-19 harrison4

你可以使用CSS3？如果是這樣，請使用CSS轉換。請閱讀：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions – Jason

試試這個，

.span4 { 
    background: red; 
    text-align: center; 
    height: 400px; 
    -webkit-transition: all 0.7s ease 0s; 
    -moz-transition: all 0.7s ease 0s; 
    -o-transition: all 0.7s ease 0s; 
    transition: all 0.7s ease 0s; 
}

http://jsfiddle.net/V6qGM/10/

來源

2013-05-19 12:18:04

嘿！謝謝！好解決方案！但是如何在幻燈片動畫結束後淡入/淡出第三個跨度？恐怕現在看起來太急劇了...... – harrison4

這有點棘手。但在你的情況下，你可以嘗試像這樣http://jsfiddle.net/V6qGM/11/ –

真的非常感謝！最後一件事：我試圖使用fadeIn（）函數而不是show（），但不起作用...你知道爲什麼嗎？ http://jsfiddle.net/V6qGM/21/embedded/result/ – harrison4

如何用動畫移動跨度？

回答

相關問題