jQuery的：顯示/隱藏是瞬時

Question

我已經包含對其他一一格：

<div> 
<div id="card-container">....</div> 
<div id="wait-for-result-container" style="display: none;">...</div> 
</div> 

在某些情況下，我想改變顯示的元素，具有淡入/淡出效果。

$('#card-container').hide(5000); 
$('#wait-for-result-container').show(5000); 

（我把一些大的數字，真正看到效果）

但是，當我觸發我的作用，它是瞬時的，沒有淡入/淡出。

我不確定它的問題，但我使用的是jquery-3.1.1和bootstrap 4 alpha。

任何想法是什麼問題？

編輯 正如問，這裏是一些澄清。 我試圖隱藏的元素立即被隱藏起來，我顯示的元素立即出現。

編輯 我試圖把這裏演示的代碼從上面：

$('#myBt').click(function(){ 
 
    $('#card-container').hide(5000); 
 
    $('#wait-for-result-container').show(5000); 
 
}); 
 

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<div> 
 
    <div id="card-container">First one</div> 
 
    <div id="wait-for-result-container" style="display: none;">Second one</div> 
 
</div> 
 
<button id="myBt">Click me</button>

Answer 1

如果您可以使用完整版本的jQuery，jQuery的給予和fadeOut一個fadeIn試試:)

$('#myBt').click(function(){ 
 
    var duration = 5000; 
 
    $('#card-container').fadeOut(duration); 
 
    $('#wait-for-result-container').delay(duration).fadeIn(duration); 
 
}); 
 

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<div> 
 
    <div id="card-container">First one</div> 
 
    <div id="wait-for-result-container" style="display: none;">Second one</div> 
 
</div> 
 
<button id="myBt">Example1</button>

如果你堅持使用瘦身版，您可以使用setInteval

$('#myBt').click(function(){ 
 
    var duration = 5000; 
 
    var op = 0.9; // initial opacity 
 
    var timer1 = setInterval(function() { 
 
     if (op <= 0.1){ 
 
      clearInterval(timer1); 
 
      op = 0; 
 
      $('#card-container')[0].style.display = 'none'; 
 
     } 
 
     $('#card-container')[0].style.opacity = op; 
 
     op -= 100/duration; 
 
    }, 100); 
 
    var timer2 = setInterval(function() { 
 
     if (op <= 0){ 
 
      $('#wait-for-result-container')[0].style.opacity = 0; 
 
      $('#wait-for-result-container').show(); 
 
     } 
 
     if (op >= 1){ 
 
      clearInterval(timer2); 
 
     } 
 
     if($('#wait-for-result-container').is(':visible')){ 
 
      $('#wait-for-result-container')[0].style.opacity = op; 
 
      op += 100/duration; 
 
     } 
 
    }, 100); 
 
}); 
 

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<div> 
 
    <div id="card-container">First one</div> 
 
    <div id="wait-for-result-container" style="display: none;">Second one</div> 
 
</div> 
 
<button id="myBt">Example2</button>