Question

只是一小段CSS，我想在一段时间后消失在这里并发现，但是出现了https://stackoverflow.com/a/31751324/10634372

Answer 1

您可以如下省去JavaScript的setTimeout（）：

$(document).ready(function() {
$("#proceed").show();
  });

$("button").click(function(){
  $("#wait").hide("slow");
  $(this).fadeOut("slow");

  $("#welcome")
.delay(500)
  .queue(function (next) { 
$(this).fadeIn(); 
$(this).animate({"font-size":"56pt","letter-spacing":".3em"},"fast");
next(); 
  });

});

#proceed {
      display: none;
}

#wait {
font: 1em Arial,Helvetica;
padding:0;
margin:0;
}

 #welcome {
 display:none;
 color:red;
 font-family: Arial,Helvetica;
 text-shadow: 3px 4px #999;
 }
 
 span {
 margin:0;
 }
 
 button {
 margin-left:45%;
 }

 p {
   background-color:beige;
   text-align:center;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p><span id="wait">You need to wait 0 before you can proceed.</span>  
<span  id="welcome">Welcome</span></p>
<button type="button" id="proceed">proceed</button>

jQuery为HTML元素提供了不同的方法来控制其显示，例如.hide（），.show（），.fadeIn（）和.fadeOut（），并且每个方法都可以采用字符串参数，例如“ slow”或“快”或一个数字来指定效果的持续时间。

关于CSS属性的设置速度，还有其他可用的东西，即queue function，您可以delay执行。此示例代码的该部分来自给定here的答案。但是，请注意以下几点：

“。delay（）方法最适合在排队的jQuery之间进行延迟效果。 —.delay（）不能替代JavaScript的本机 setTimeout函数，可能更适合某些用途案例。”

来源：here

animate（）方法还会影响元素显示的速度。

Answer 2

在另一个堆栈上的代码中，答案为$("#proceed").show(); 删除.show();并替换为.hide();

完整代码为：

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script>
<p>You have <span id="time">5</span> seconds to proceed</p>
<button type="button" id="proceed">proceed</button>

var i = 4;
var time = $("#time")
var timer = setInterval(function() {
  time.html(i);
  if (i == 0) {
    $("#proceed").hide();
    clearInterval(timer);

  }
  i--;
}, 1000)

#proceed {
  display: none;
}

经过一段时间后消失

2 个答案: