jquery – 动画引导列

这里是我想做的：

---------------------------------------------
|                                           |
|                                           |
|                                           |
|              .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>

$('#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)

注意：动画仍然有点不精确，但我认为，可以分别解决。这个答案提供了如何去做的基本概述。

jquery – 动画引导列

解决方法

猜你在找的jQuery相关文章