これが私がやりたいことです:
---------------------------------------------
| |
| |
| |
| .span12 #col1 |
| |
| |
| |
| [#button] |
| |
| |
---------------------------------------------
次に、#buttonがクリックされると、#col1のコンテンツが右にスライドして.span3に移動し、#col2 .span9が左から右に(画面外から)アニメーションします。
-------------------------------------------------
| | |
| | |
| | |
| .span9 #col2 | .span3 #col1 |
| | |
| | |
| | |
| | [#button] |
| | |
| | |
-------------------------------------------------
そして、逆が起こり、元の状態に戻る可能性があります。
ありがとう!
Twitter Bootstrapグリッドシステムを使用しています。グーグルTwitter Bootstrap column transtions animation
とバリエーションは何も現れませんでした。私はjqueryアニメーションの第一人者ではないので、スタックオーバーフローのkindの人々に懇願すると思いました。
希望は、この種のことについて私よりも多くのことを知っている誰かが、それがどのように達成できるかを示すコードで答えるだろうということです。申し訳ありませんが、サイトに投稿するだけでそれが暗示されると思いました。
これは、CSS3トランジションで実行できます。これは、JSプラグインがアニメーションを実行する方法Bootstrapと一致します。
<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');
});
.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;
}
注:アニメーションはまだ少し不正確ですが、私はすべて別々に解決できると考えています。この回答は、その方法の基本的な概要を示しています。
これはレスポンシブなフィドルの上に構築されています: http://fiddle.jshell.net/274NN/74/
編集フローのタイプです。ボタンをクリックしたときにスライドメニューを表示するとします。
1)左の列をウィンドウの外にスライドさせる2)メニューを右からスライドさせる
メニューの幅は%で指定されます。必要に応じて変更できます