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

（我把一些大数字真的看到效果）

但是当我触发我的效果时，它是瞬间的，没有淡入/淡出。

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果你必须坚持使用超薄版本，可以使用setInteval

＆＃13;

$('#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);
});

＆＃13;

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

＆＃13;

jQuery：show / hide是瞬间完成的

1 个答案: