jquery - 动画 Bootstrap 列

Question

这是我想做的:

初始显示

---------------------------------------------
|                                           |
|                                           |
|                                           |
|              .span12 #col1                |
|                                           |
|                                           |
|                                           |
|                               [#button]   |
|                                           |
|                                           |
---------------------------------------------

然后，当#button 被点击时，#col1 的内容会向右滑动到 .span3 中，#col2 .span9 会从左到右(从屏幕外)动画:

按钮点击/动画后

-------------------------------------------------
|                                |              |
|                                |              |
|                                |              |
|              .span9  #col2     | .span3 #col1 |
|                                |              |
|                                |              |
|                                |              |
|                                | [#button]    |
|                                |              |
|                                |              |
-------------------------------------------------

然后反转可能恰好到达原始状态。

谢谢!

问题是

我正在使用 Twitter Bootstrap 网格系统。谷歌搜索 Twitter Bootstrap column transitions animation 和变体没有找到任何东西。我不是 jquery 动画大师，所以我想我会向 stack overflow 上的好心人求教。

希望这里有人对这类事情的了解可能比我多，他们会用一些代码来回答，说明如何实现。抱歉，我认为只是在网站上发帖就暗示了这一点。

这是我试过的

http://jsfiddle.net/KdhAB/3/

Answer 1

这可以通过 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)

_{注意:动画还是有点不够精确，但我觉得可以单独解决。这个答案提供了如何去做的基本轮廓。}