jQuery: show/hide 瞬时

Question

我有一个 div 包含另一个：

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

在某些事件中，我想更改显示的元素，具有 fadeIn/fadeOut 效果。

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

（为了看效果我放了大号）

但是我的效果触发的时候是瞬发的，没有fade-in/fade-out.

我不确定这是否重要，但我使用的是 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，试试jQueryfadeOut和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>

jQuery: show/hide 瞬时

jQuery: show/hide are instantaneous

javascript

jquery

bootstrap-4