幅のサイズ変更でブートストラップ要素の位置をアニメートする方法（Masonryのような）？

Question

私は3列のブートストラップレイアウトを持っています（divは33.33％の幅で左に浮いています）。

$("#toggle-btn").clickToggle(function() { 
    //MAKE 2 COLS 
    $(".col-md-4").stop().animate({width: "50%"}, 500); 
}, function() { 
    //BACK TO 3 COLS 
    $(".col-md-4").stop().animate({width: "33.33%"}, 500); 
}); 

HTML：：私は、次のような2列のレイアウトにこれをトグルするボタンを持って

<div class="row" id="container"> 
    <div class="col-md-4">I'm a column</a> 
    <div class="col-md-4">I'm a column</a> 
    <div class="col-md-4">I'll appear on a 2nd row when the toggle is hit</a> 
    <div class="col-md-4">I'm a column</a> 
</div> 

これは正常に動作しますが、それはかなり分厚い見えます。 3番目の列が表示され、トグルがクリックされると消えます。ポジションを変更して2行目に移動する必要がある場合は、.col-md-4要素をアニメーション化したいと思います。

これを達成するためにMasonryを使用しようとしましたが、成功しませんでした。これは、列の幅をパーセンテージとして気に入らないようです。アニメーション部分を自分自身で作成して、それをもっとコントロールできるようにしたいと思います。

私はこれを自分自身で達成する方法についてはわかりません。誰かが正しい方向に私を指すことができるだろうか？

編集：私は青い「検索」ボックスには、この例ではどのように動作するかと同様の効果の後にしています（サイズを変更ブラウザー）：

http://codepen.io/chriscoyier/pen/tynas

Answer 1

どのようにこのようなものでしょうか？注意してください、フルスクリーン表示で少し良く機能しているようです。私はあなたがタイミングを調整することでより良い何かをすることができると確信しています。 多く細胞が潜在的にあることを考えると

(function($) { 
 
    $.fn.clickToggle = function(func1, func2) { 
 
     var funcs = [func1, func2]; 
 
     this.data('toggleclicked', 0); 
 
     this.click(function() { 
 
      var data = $(this).data(); 
 
      var tc = data.toggleclicked; 
 
      $.proxy(funcs[tc], this)(); 
 
      data.toggleclicked = (tc + 1) % 2; 
 
     }); 
 
     return this; 
 
    }; 
 
}(jQuery)); 
 

 
$("#toggle-btn").clickToggle(function() { 
 

 
    $("#target.col-xs-4") 
 
    .stop() 
 
    .animate({width: "0%"}, 900) 
 
    .animate({width: "50%"}, 500); 
 

 
    $(".col-xs-4").not("#target") 
 
    .stop() 
 
    .animate({width: "50%"}, 1000); 
 
    
 
}, function() { 
 

 
    $(".col-xs-4").not("#target") 
 
    .stop() 
 
    .animate({width: "33.33%"}, 1000); 
 

 
    $("#target.col-xs-4") 
 
    .stop() 
 
    .animate({width: "0%"}, 900) 
 
    .animate({width: "33.33%"}, 500); 
 

 
});

.col-xs-4 { 
 
    border: solid 1px; 
 
    height: 3em; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div style="margin-bottom: 1em;"><button id="toggle-btn">toggle</button></div> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4">I'm a column</a></div> 
 
    <div class="col-xs-4">I'm a column</a></div> 
 
    <div id="target" class="col-xs-4">2nd row when the toggled</a></div> 
 
    <div class="col-xs-4">I'm a column</a></div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 2

、私は今、アニメーションに対して推薦します。あなたは、その後にフェードイン、細胞をフェージングクラスを交換してみてください（または手動で幅を設定）することがあります。

(function($) { 
 
    $.fn.clickToggle = function(func1, func2) { 
 
     var funcs = [func1, func2]; 
 
     this.data('toggleclicked', 0); 
 
     this.click(function() { 
 
      var data = $(this).data(); 
 
      var tc = data.toggleclicked; 
 
      $.proxy(funcs[tc], this)(); 
 
      data.toggleclicked = (tc + 1) % 2; 
 
     }); 
 
     return this; 
 
    }; 
 
}(jQuery)); 
 

 
$("#toggle-btn").clickToggle(function() { 
 

 
    $(".col-xs-4").fadeOut(500, function(){ 
 
    var $this = $(this); 
 
    $this.removeClass("col-xs-4") 
 
    $this.addClass("col-xs-6") 
 
    $this.fadeIn(500); 
 
    }); 
 
    
 
}, function() { 
 

 
    $(".col-xs-6").fadeOut(500, function(){ 
 
    var $this = $(this); 
 
    $this.removeClass("col-xs-6") 
 
    $this.addClass("col-xs-4") 
 
    $this.fadeIn(500); 
 
    }); 
 

 
});

.col-xs-4, .col-xs-6 { 
 
    border: solid 1px; 
 
    height: 3em; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div style="margin-bottom: 1em;"><button id="toggle-btn">toggle</button></div> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4">column a</div> 
 
    <div class="col-xs-4">column b</div> 
 
    <div class="col-xs-4">column c</div> 
 
    <div class="col-xs-4">column d</div> 
 
    <div class="col-xs-4">column e</div> 
 
    <div class="col-xs-4">column f</div> 
 
    <div class="col-xs-4">column g</div> 
 
    <div class="col-xs-4">column h</div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>