Home > Web Front-end > JS Tutorial > How to make elements disappear after 3 seconds in jquery

How to make elements disappear after 3 seconds in jquery

WBOY
Release: 2021-12-13 14:20:40
Original
3220 people have browsed it

Jquery method to make elements disappear after 3 seconds: 1. Use the delay() method to specify the operation delay time; 2. Use the hide() method to hide the element after the specified delay time. The syntax is " $(specified element).delay(3000).hide(300);”.

How to make elements disappear after 3 seconds in jquery

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

jquery How to make elements disappear after 3 seconds

If you want to achieve the effect of elements disappearing after three seconds, you need to use the delay() method and hide() method.

The delay() method sets a delay for the execution of the next item in the queue.

The syntax is:

$(selector).delay(speed,queueName)
Copy after login

hide() method is used to hide elements.

Let’s take an example to see how to use the above two methods to make the element disappear after 3 seconds. The example is as follows:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $("#dianji").click(function(){
            $("#disappare").delay(3000).hide(300);
        });
    })
</script>
</head>
<body>
    <div id="content">
        <button id="dianji">点击</button>
        <div id="disappare">
            <p>点击3秒后会自动消失</p>
        </div>
    </div>
</body>
</html>
Copy after login

Output result:

How to make elements disappear after 3 seconds in jquery

Recommended related video tutorials: jQuery video tutorial

The above is the detailed content of How to make elements disappear after 3 seconds in jquery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template