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

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

是否有任何bootstrap js或自定义j允许我进行无缝转换？

PS：我试过隐藏（'慢'）并显示（'慢'）。它们并没有完全达到标记：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>

Answer 2

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


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

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

fadeIn（）和fadeOut（）的Bootstrap过渡

2 个答案: