Web フォームの行\列レイアウトに Twitter Bootstrap を使用しています。行を表示\非表示にするチェックボックスが画面にあり、jqueryを使用して、行をフェードイン\アウトするこの素敵なシンプルなアニメーションがあります。問題は、フェードアウトが完了した後、他のすべての行が「ジャンプ」することです。divのサイズ変更をソフトに処理するためにjQueryで実行できるチェーンはありますか? または、マークアップでできることは何か違うのでしょうか?
コードはここにあり、私の問題を示すフィドルとともに、事前に助けてくれてありがとう!
<input type="checkbox" id="chk1" checked="checked" class="checkbox" style="padding-left: 0px;" />Do something
<div class="container">
<legend>Stuff</legend>
<div class="well">
<div class="row">
<div class="span6">
<div class="row">
<div class="row-fluid">
<div class="span3 offset1 text-right">
<label>Something:</label>
</div>
<div class="span6">
<label>Lorem</label>
</div>
</div>
</div>
<div class="row option">
<div class="row-fluid">
<div class="span3 offset1 text-right">
<label>Something:</label>
</div>
<div class="span6">
<label>Ipsum</label>
</div>
</div>
</div>
<div class="row">
<div class="row-fluid">
<div class="span3 offset1 text-right">
<label>Something:</label>
</div>
<div class="span6">
<label>Dolor</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
そして、ここに私のjqueryがあります:
$(document).ready(function () {
$('#chk1').click(function () {
if (this.checked) {
$('.option').fadeIn();
}
else {
$('.option').fadeOut();
}
});
});