使隐藏元素显示 X 秒

Make hidden element appear for X seconds

本文关键字：显示 元素 隐藏      更新时间：2023-09-26

我只是在单击按钮后尝试显示隐藏元素 X 秒。我能够让它出现，但不要让它在 X 秒后再次消失。我用delay(X)试过了，但没有任何反应。

$("#mybutton").on(
  "click",
  function() {
    $("#test").css("visibility", "visible");
    $("#test").delay(1000).css("visibility", "hidden");
  }
);
#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
  float: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">
<div id="mybutton">
  Button
</div>

JSFIDDLE： https://jsfiddle.net/75sttmxj/

尝试在此上下文中使用setTimeout()，

setTimeout(() => { $("#test").css("visibility", "hidden"); }, 1000 * 1000);

由于.delay()只能延迟动画队列。

演示

如果您不想使用arrow function来执行此操作，那么您可以简单地使用如下所示的普通anonymous function，

setTimeout(function(){ $("#test").css("visibility", "hidden"); }, 1000);

.delay（）

.delay（） 方法允许我们 以延迟队列中跟随它的函数的执行。它 可与标准效果队列或自定义队列一起使用。 只有队列中的后续事件才会延迟;例如，这将 不延迟 .show（） 或 .hide（） 的无参数形式，它们不会 使用效果队列。

所以你可以使用，例如淡入淡出：-

$("#mybutton").on("click", function() {
  $("#test").fadeIn().delay(1000).fadeOut();
});
#test {
  display: none;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="https://jsfiddle.net/img/logo.png">
<div id="mybutton">
  button
</div>

或创建自定义队列：-

$("#mybutton").on("click", function() {
  $("#test").queue(function() {
      $(this).css("visibility", "visible").dequeue();
    })
    .delay(1000)
    .queue(function() {
      $(this).css("visibility", "hidden").dequeue();
    });
});
#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="https://jsfiddle.net/img/logo.png">
<div id="mybutton">
  button
</div>

尝试对不透明度进行动画处理：

$("#mybutton").on(
  "click",
  function() {
    $("#test").animate({
      "opacity": 1
    }).delay(1000).animate({
      opacity: 0
    });
  }
);
#test {
  opacity: 0;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
  float: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">
<div id="mybutton">
  Button
</div>

与上述答案相同，但随后被所有浏览器支持

$("#mybutton").on
(
  "click",
  function()
  {
  	$("#test").css("visibility","visible");
        setTimeout(function () 
        {
            $("#test").css("visibility", "hidden");
        }, 1 * 1000);
  }
);
#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">
<div id="mybutton">
    button
</div>

$(document).ready(function () {
    $("#mybutton").on( "click",  function() {
        console.log('---------');
        $("#test").css("visibility", "visible");
        setTimeout(function () {
   $("#test").css("visibility", "hidden");
        }, 1000);
       
      });
      });
 #test {
      visibility:hidden;
    }
    #mybutton:hover {
      cursor: pointer;
    }
    #mybutton {
      border: 1px solid black;
      background-color: gray;
      float: top;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg" />
    <div id="mybutton">
      Button
    </div>

试试这个代码：

更多参考

相关文章：