fadeIn()和fadeOut()的引导过渡

Bootstrap Transition for fadeIn() and fadeOut()

本文关键字：fadeOut fadeIn      更新时间：2023-09-26

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

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

and my javascript:

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

在这种情况下，我想要一个无缝的淡出/淡出过渡效果从按钮到框，但是上面的代码将使按钮和框共存几秒钟(出现在按钮上方的按钮)，在按钮消失之前(然后框占据按钮的原始位置)。

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

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

谢谢! !

显示 fadeOut() 完整回调函数

$(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>

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

<>以前 $('#button').fadeOut('slow', function() { $('#box').fadeIn('slow'); }) 之前

只有在淡出完成后才会调用淡出

相关文章：