Question

我有一个3列Bootstrap布局（div左侧浮动，宽度为33.33％）。我有一个按钮，可以将其切换为2列布局：

$("#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：

<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列仅显示并消失。我希望动画.col-md-4元素的动画，当它们改变位置并需要进入第二行时。

我尝试过使用Masonry实现这一目标，但没有成功 - 它似乎不喜欢列宽为百分比。我希望能够自己创建动画部分，以便更好地控制它。

我不确定如何自己实现这一目标。有人能指出我正确的方向吗？

编辑：我的效果类似于Blue'搜索'框在此示例中的行为（调整大小浏览器）：

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>

如何在宽度调整大小（如砌体）上为Bootstrap元素的位置设置动画？

2 个答案: