0

我将 Twitter Bootstrap 用于我的 web 表单上的 row\col 布局。我在屏幕上有一个复选框，它将显示\隐藏一行，并且使用 jquery 我有这个漂亮的简单动画来淡入\淡出该行。问题是，在淡出完成后，所有其他行“跳跃”。我可以在 jQuery 中做任何链接来轻柔地处理 div 调整大小吗？或者，也许我可以用我的标记做一些不同的事情？

代码在这里，以及展示我的问题的小提琴，提前感谢您的帮助！

<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

1

解决它的一种方法是将其高度设置为 0 然后隐藏它，并在选中显示它然后将其设置为原始高度。

$(document).ready(function () {
    $('#chk1').click(function () {
        if (this.checked) {
            $('.option').show().animate({
                height: 20
            }, 300);

        } else {
            $('.option').animate({
                height: 0
            }, 300, function () {
                $(this).hide();
            });
        }
    });

});

小提琴

于 2013-08-02T15:16:18.603 回答