Bootstrap显然使用’hide’,’fade’和’in’类来进行转换.
我遇到的问题是使用“淡入淡出”和“输入”会将不透明度从0更改为1.过渡效果非常完美,但内容仍占用页面空间,即使您不能看见.例如,如果它的容器有边框,边框前面会有一个很大的空白区域.
我希望通过添加和删除’in’类来利用它们现有的CSS转换,但我也想要隐藏任何淡出的元素,但只有在转换结束后才能隐藏.所以基本上,他们确实在模态中做了什么,但我不知道他们是如何做到的.
在下面的示例中,添加或删除隐藏意味着div会在淡入淡出效果发生之前立即显示或消失.
示例HTML：
<div class="control-group">
<label class="control-label">Choose one:</label>
<div class="controls">
<label class="radio inline">
<input type="radio" name="color-radio" id="yellow-trigger" value="yellow" />Yellow Box</label>
<label class="radio inline">
<input type="radio" name="color-radio" id="red-trigger" value="red" />Red Box</label>
</div>
</div>
<div id="yellow-Box" class="hide fade">
<p>I'm yellow</p>
</div>
<div id="red-Box" class="hide fade">
<p>I'm red</p>
</div>
示例JS：
$(document).ready(function () {
$('#yellow-trigger').click(function () {
$('#yellow-Box').addClass('in').removeClass('hide');
$('#red-Box').addClass('hide').removeClass('in');
});
$('#red-trigger').click(function () {
$('#red-Box').addClass('in').removeClass('hide');
$('#yellow-Box').addClass('hide').removeClass('in');
});
});
解决方法
有什么理由不使用jQuery作为fadeIn效果？下面是一些使用jQuery实现淡入淡出的代码.
删除了“淡入淡出”课程
<div id="yellow-Box" class="hide"> <p>I'm yellow</p> </div>
更新了淡入淡出的jQuery
$(document).ready(function () {
$('#yellow-trigger').click(function () {
$('#red-Box').hide();
$('#yellow-Box').fadeIn('slow');
});
$('#red-trigger').click(function () {
$('#yellow-Box').hide();
$('#red-Box').fadeIn('slow');
});
});
