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