0

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(); 
            }
        });
    });
4

1 に答える 1