fadeIn（）和fadeOut（）的Bootstrap过渡

I am html and JavaScript newbie. here's my html code.

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

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

and my javascript:

和我的javascript：

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

In this case, I want a seamless fadein/fadeout transition effect from the button to the box , but the above code will make the button and the box coexist for a few seconds (appears as button above box), before the button disappear (Then box takes the original place of the button).

在这种情况下，我想要从按钮到盒子的无缝淡入/淡出过渡效果，但上面的代码将使按钮和盒子共存几秒钟（在盒子上方显示为按钮），然后按钮消失（然后框采取按钮的原始位置）。

Is there any bootstrap js or customized js allow me to have the seamless transition?

是否有任何bootstrap js或自定义js允许我进行无缝过渡？

PS: I've tried hide('slow') and show('slow'). They don't quite hit the mark neither :s

PS：我试过隐藏（'慢'）并显示（'慢'）。他们也没有达到这个标准：s

Thank You!!!

谢谢！！！

2 个解决方案

#1

Show the box div in fadeOut() complete callback function

在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>

#2

fadein and fadeout functions have callbacks where the callback is called when the fadein /fadeout completes.

fadein和fadeout函数有回调函数，当fadein / fadeout完成时调用回调。


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

Here the fadein will be called only after the fadeOut has finished.

只有在fadeOut完成后才会调用fadein。

#1