使用 jquery 在 n 秒后阻止“显示然后隐藏”

Question

乍一看，我正在尝试执行一些非常简单的事情，但我做不到。 我有一个按钮和两个隐藏的 div。按下按钮时，我希望显示第一个 div，n 秒后隐藏，然后显示第二个 div。

html：

<button id="button">
  push
</button>
<div id="div1" style="display:none">
  firstDiv
</div>
<div id="div2" style="display:none">
  secondDiv
</div>

完整的代码和 JS 在这里：https://jsfiddle.net/439xbfe5/

我已经在这里检查了答案：jQuery show for 5 seconds then hide

此代码的问题是 #div2 在 #div1 消失之前出现：

$("#button").click(()=>{

  var timeLimit = 5000;
  $("#div1").show().delay(timeLimit).fadeOut();
  $("#div2").show();
  
});

同样的问题：

$("#button").click(()=>{

  var timeLimit = 5000;
  $("#div1").show();
  setTimeout(function() { $("#div1").hide(); }, timeLimit );
  $("#div2").show();
  
});

我还尝试创建一个阻塞睡眠功能，例如：

function sleep(ms){
  var start = new Date().getTime();
  while(true){ 
    if(new Date().getTime()-start>ms){
        return; 
     }
  }
}

$("#button").click(()=>{

  var timeLimit = 5000;
  $("#div1").show();
  sleep(timeLimit);
  $("#div2").show();
});

但这根本不起作用。

另外，显示#div2 只是我的问题的一个说明。 实际上，我不需要“编译”显示然后隐藏，但#div1 更像是按下按钮之前和之后之间的过渡步骤。我希望你能理解我的问题（对不起我的英语）。

谢谢！

Answer 1

你必须使用 complete callback 函数在 jquery 动画完成“之后”做一些事情。

$("#button").click(()=>{

  var timeLimit = 5000;
  $("#div1").show().delay(timeLimit).fadeOut(function(){
    $("#div2").show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">
  push
</button>
<div id="div1" style="display:none">
  firstDiv
</div>
<div id="div2" style="display:none">
  secondDiv
</div>