Animate bootstrap columns

Question

Here's what I'd like to do:

Initial Display

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

Then when #button gets clicked, #col1 contents are animated sliding over to the right into a .span3 and #col2 .span9 animates in from the left to the right (from off screen):

After Button Click/Animation

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

And then the inverse could happen to get to the original state.

Thanks!

THE QUESTION IS

I'm using Twitter Bootstrap grid system. Googling Twitter Bootstrap column transtions animation and variations didn't turn up anything. I'm not a jquery animation guru, so I thought I'd beseech the kind people on stack overflow.

The hope is that there's someone on here that may know more than me about this sort of thing would answer with some code that shows how it can be achieved. Sorry, I thought that was implied just by posting on the site.

Here's what I've tried

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

Solution 1

This could be done with CSS3 transitions, which would be consistent with the way Bootstrap JS plugins accomplish their animations.

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)

_{Note: The animation is a still a bit imprecise, but I figure that can all be worked out separately. This answer provides the basic outline of how to go about it.}

Solution 2

This one is built on top of the responsive fiddle: http://fiddle.jshell.net/274NN/74/

It is type of an edit flow e.g. suppose you want to show a sliding menu on click of a button:

1) Slide left column out of the window 2) Bring menu sliding from the right

Menu width is given in %, you can change it as per your needs