How to implement the disappear function after two seconds in jquery

As we all know, time is a very important element in web design. Sometimes, we need to display some prompt information on the web page, such as success prompts, error prompts, etc., but these information do not need to stay on the page all the time, they just need to flash in front of the user's eyes.

So we thought about how to implement such prompt information on the page? Today we will take a look at jquery's "fadeOut" method. By using its simple code, we can easily achieve this effect.

First of all, let us take a brief look at jquery. It is a fast, small, powerful and beautifully designed JavaScript library based on JavaScript. It was originally developed by John Resig in 2006. It was released in January and is widely used in front-end development of Web websites. It enables users to more conveniently operate HTML documents, handle events, create animation effects, implement Ajax programs, and more.

The "fadeOut" method is a method provided in jquery to realize the fading of elements by setting a time interval. Let's take a look at its detailed usage.

First, we need to reference the jquery library, which can be introduced in the following ways:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Then, we need to add a div element to the page as a container for our prompt box. The code is as follows:

<div id="tip">这是一个提示信息！</div>

Next, we can write the following code in JavaScript:

$(document).ready(function(){
  // 2秒后元素消失
  $("#tip").fadeOut(2000);
});

Let’s explain the above code step by step:

First, we use "$(document).ready ()" function to ensure that the HTML document of the page has been loaded, and then we can operate on the elements.

Use the "$("#tip")" selector to get the div element we just added, and use the "fadeOut()" method to fade it in and out, where 2000 means we want the element to be in Disappears within 2 seconds.

Through the above method, we can very conveniently achieve the effect of displaying a prompt box on the page for only 2 seconds.

In addition, we can also use the "fadeIn()" method to make elements fade out. I believe you will be very interested! Finally, please look at the complete code below to feel the charm of the "fadeOut" method:

  
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  



  <div id="tip">这是一个提示信息！</div>

In short, jquery, as a very excellent JavaScript library, provides a lot of convenience for the development of Web front-end. The use of the "fadeOut" method makes it very simple and easy to use. The above is the content shared in this article. I hope it will be helpful to everyone's learning. I also hope that everyone can continue to pay attention to related front-end development technologies and continuously improve their skill levels.

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