Home >Web Front-end >Front-end Q&A >How to make the display element hide after 5 seconds in jquery
How to make the display element hide after 5 seconds in jquery
- WBOYOriginal
- 2022-06-06 18:51:581301browse
Method: 1. Use "$("Element")" to obtain the specified element object; 2. Use "Element object.delay(5000)" to set the execution delay of the next item of the element for 5 seconds; 3. Use "Set delayed element object.fadeOut();" to set the element to hide after the delay time.
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
jquery element is hidden after 5 seconds
1. Get the element object
The syntax is as follows:
$(selector)
2.Setting The delay time is 5 seconds.
The delay() method sets a delay for the execution of the next item in the queue.
Syntax
$(selector).delay(speed,queueName)
3. Set the delay and then hide it
fadeOut() method gradually changes the opacity of the selected element, from visible to Hidden (fading effect).
Note: Hidden elements will not be fully displayed (no longer affect the layout of the page).
The syntax is:
$(selector).fadeOut(speed,easing,callback)
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="jsjquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").delay(5000).fadeOut();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
</body>
</html>Output result:
Video tutorial recommendation:jQuery video tutorial
The above is the detailed content of How to make the display element hide after 5 seconds in jquery. For more information, please follow other related articles on the PHP Chinese website!