jquery - Bootstrap : How to fade and then hide something using the default 'fade' , 'hide' 、 'in' 类？

Question

Bootstrap 显然使用了“hide”、“fade”和“in”类来进行转换。

我遇到的问题是使用“fade”和“in”会将不透明度从0更改为1。过渡效果很完美，但内容仍然占据页面上的空间，即使您看不到它。例如，如果它的容器有边框，则边框之前会有一个很大的空白。

我想通过添加和删除“in”类来利用现有的 CSS 过渡，但我也希望隐藏任何淡出的元素，但只有在过渡结束后才隐藏。基本上，他们在模式中做了什么，但我不知道他们是如何做到的。

在下面的示例中，添加或删除隐藏意味着 div 在淡入淡出效果发生之前立即出现或消失。

JS fiddle here

示例 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');
    });
});

Answer 1

有什么理由不只使用 jQuery 来实现 fadeIn 效果？下面是一些使用 jQuery 实现淡入淡出效果的代码。

Fiddle here

删除了“淡入淡出”类

<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');     
  });

});