这里是我想做的：
初始显示
--------------------------------------------- | | | | | | | .span12 #col1 | | | | | | | | [#button] | | | | | ---------------------------------------------
然后当#button被点击时，#col1内容动画向右滑动到.span3和#col2 .span9动画从左到右动画(从屏幕外)：
按钮单击/动画后
------------------------------------------------- | | | | | | | | | | .span9 #col2 | .span3 #col1 | | | | | | | | | | | | [#button] | | | | | | | -------------------------------------------------
然后反向可能发生到达到原始状态。
谢谢！
问题是
我使用Twitter Bootstrap网格系统。 Googling Twitter Bootstrap列transtions动画和变化没有打开任何东西。我不是一个jquery动画大师，所以我想我会恳求那种人在堆栈溢出。
希望在这里有一个人可能比我更了解这种事情会回答一些代码，显示如何可以实现。对不起，我以为这是暗示只是通过在网站上发布。
这是我试过的
http://jsfiddle.net/KdhAB/3/
解决方法
这可以使用CSS3转换，这将与Bootstrap JS插件完成他们的动画的方式一致。
HTML
<div class="container">
<div class="row">
<div id="col2" class="span0"></div>
<div id="col1" class="span12">
<a id="trig" class="btn btn-inverse">Reflow Me</a>
</div>
</div>
</div>
JS
$('#trig').on('click',function () {
$('#col1').toggleClass('span12 span3');
$('#col2').toggleClass('span0 span9');
});
CSS
.row div {
-webkit-transition: width 0.3s ease,margin 0.3s ease;
-moz-transition: width 0.3s ease,margin 0.3s ease;
-o-transition: width 0.3s ease,margin 0.3s ease;
transition: width 0.3s ease,margin 0.3s ease;
}
.span0 {
width: 0;
margin-left: 0;
}
JSFiddle
JSFiddle (Fluid)
注意：动画仍然有点不精确，但我认为，可以分别解决。这个答案提供了如何去做的基本概述。