javascript - fadeIn() 和 fadeOut() 的 Bootstrap 转换

Question

我是 html 和 JavaScript 新手。这是我的 html 代码。

<div class="row" >
    <button class="..." id="button">
         ...
    </button>
     <div class="..." id="box">
         ...
     </div>
</div>

和我的 JavaScript:

$(document).read(function(){
     $('#box').hide();
     $('#button').click(function(){
          $('#button').fadeOut('slow');
          $('#box').fadeIn('slow);
    }
}

在本例中，我想要从按钮到框的无缝淡入/淡出过渡效果，但上面的代码将使按钮和框共存几秒钟(在按钮上方显示为按钮)，在按钮消失之前(然后框取代按钮的原始位置)。

是否有任何 bootstrap js 或自定义 js 可以让我实现无缝转换？

PS:我尝试过 hide('slow') 和 show('slow')。他们也没有完全击中目标:s

谢谢!!!

Answer 1

在 fadeOut() 中显示框 div 完整的回调函数

$(document).ready(function() {
  $('#box').hide();
  $('#button').click(function() {
    $('#button').fadeOut('slow', function() {
      $('#box').fadeIn('slow');
    })
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <button class="..." id="button">
    ...a
  </button>
  <div class="..." id="box">
    ...b
  </div>
</div>