Bootstrap - 通过动画隐藏列

Question

我有一个html布局如下：

<button>Hide first column</button>
<div class="row">
  <div class="col-lg-1" id="left">Stuff</div>
  <div class="col-lg-8" id="middle">Main Middle</div>
  <div class="col-lg-3">1 + 8 + 3 is 12 right?</div>
</div>

使用以下JS/jQuery代码：

$(document).ready(function() {
    $('button').click(function() {
        $('#left').toggleClass('hidden');
        if ($("#left").hasClass('hidden')) {
            $("#middle").removeClass('col-lg-8');
            $("#middle").addClass('col-lg-9');
        } 
        else {
            $("#middle").removeClass('col-lg-9');
            $("#middle").addClass('col-lg-8');
        }
    });
}); 

正如您所看到的，我基本上是在移除左侧列并扩大中间列（我可能最终也会扩大右侧列）。

有没有办法以动画方式进行这些更改，而不是突然发生？我想到的是列沿着填充空间滑动的效果。

这是 bootply 的链接：http://www.bootply.com/MWz4O7khWq

谢谢。

- StackOverflowed

---

我认为通过JS更改类不可动画化，你应该将第一列的宽度更改为0（JS动画方法），或编写一个具有此类动画效果的CSS类（CSS动画方法）。 - Cheslab

Answer 1

我不是在使用Bootstrap，但是通过以下内容，你应该能够理解：

$(document).ready(function () {
    originalwidth = $('#left').width();
    $('button').click(function () {
        if ($('#left').width() > 0) {
            $('#left').animate({
                width: "0"
            }, 500);
        }
        else {
            $('#left').animate({
                width: originalwidth
            }, 500);
        }
    });
});

.table {
    display: table;
    width: 500px;
    table-layout: fixed;
}
.row {
    display: table-row;
}
.row div {
    display: table-cell;
    border: 1px solid red;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Hide first column</button>
<div class="table">
    <div class="row">
        <div class="col-lg-1" id="left">Stuff</div>
        <div class="col-lg-8" id="middle">Main Middle</div>
        <div class="col-lg-3">1 + 8 + 3 is 12 right?</div>
    </div>
</div>

有用的链接：

• jQuery .animate()
• jQuery .width()
• 使用CSS动画

- Cheslab