jQuery 动画引导列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12520751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate bootstrap columns
提问by Ronnie Overby
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):
然后当 #button 被点击时，#col1 内容被动画向右滑动到 .span3 和 #col2 .span9 从左到右（从屏幕外）动画：
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 animationand variations didn't turn up anything. I'm not a jquery animation guru, so I thought I'd beseech the kindpeople on stack overflow.
我正在使用 Twitter Bootstrap 网格系统。谷歌搜索Twitter Bootstrap column transtions animation和变化没有发现任何东西。我不是一个jQuery的动画大师，所以我想我会祈求那种人堆栈溢出。
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
这是我尝试过的
回答by merv
This could be done with CSS3 transitions, which would be consistent with the way Bootstrap JS plugins accomplish their animations.
这可以通过 CSS3 过渡来完成，这与 Bootstrap JS 插件完成动画的方式一致。
HTML
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
JS
$('#trig').on('click', function () {
$('#col1').toggleClass('span12 span3');
$('#col2').toggleClass('span0 span9');
});?
CSS
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
JSFiddle (Fluid)
JSFiddle（流体）
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.
注意：动画仍然有点不精确，但我认为所有这些都可以单独制定。这个答案提供了如何去做的基本大纲。
回答by Ramandeep Singh
This one is built on top of the responsive fiddle: http://fiddle.jshell.net/274NN/74/
这个建立在响应式小提琴之上：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
1) 将左列滑出窗口 2) 将菜单从右侧滑出
Menu width is given in %, you can change it as per your needs
菜单宽度以 % 给出，您可以根据需要进行更改
