Bootstrap Transition for fadeIn() и fadeOut()

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

В этом случае, я хочу бесшовный FadeIn/затухание эффекта перехода от кнопки к коробке, но приведенный выше код будет сделать кнопку и box сосуществует в течение нескольких секунд (появляется как кнопка над полем), прежде чем кнопка исчезнет (тогда окно занимает исходное место кнопки).

Есть ли какой-либо загрузочный js или настроенный js, позвольте мне иметь безплатно переход?

PS: Я попытался скрыть («медленно») и показать («медленно»). Они не совсем попали в точку ни: s

Спасибо!

Answer 1

Показать DIV коробки в 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>

Answer 2

FadeIn и FADEOUT функции имеют обратные вызовы, когда функция вызывается, когда FadeIn/Затухание завершается.

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

Здесь fadein будет называться только после того, как fadeOut закончен.