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');
        }
    });
}); 

正如你所看到的，我基本上删除了左列并加宽了中间（我最终也可能加宽了右列）。

有没有办法让这些变化变得生动起来，而不是让它们突然发生？我正在考虑沿着柱子滑动一些东西来填充空间。

这是引导程序：http://www.bootply.com/MWz4O7khWq

谢谢

Answer 1

我不使用引导程序，但通过这个你应该明白：

$(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 动画