Display an Element for 5 Seconds using JavaScript

In this tutorial, we are going to show you on how to Display an Element for 5 Seconds using JavaScript. We are going to use JavaScript library for creating this simple tutorial that can display any element for 5 seconds. Features of this simple tutorial.

1. The element (or any element) fade into a display.
2. The element (or any element) fade out after 5 seconds and this going to hide it.

Creating Markup

This simple source code using jQuery execute to display the element for 5 seconds. Let’s take a look at the following sample of source code below. Kindly copy and paste this source code to your BODY tag of your page. After compiling the source code above, there’s a short text “Welcome to the Sourcecodester Tutorials!” is displayed in your current browser for five (5) seconds and it will be hidden from the user after five (5) seconds. We have quick explanation below of the source code above:

• We have our div and the id “message_display” – it will help us to access it using jQuery.
• In our div, we have an Inline style of “display:none” – to make sure that our div and the text inside it will be hidden to the user.
• We include the jQuery library file from the jQuery​ CDN to execute the program.
• We are going to use the ready function in the short script to make sure that our source code does not execute automatically until the page or the browser has been loaded.
• If the browser or the current page is loaded, the script will be executed then the div will display using the fadeIn function within five (5) seconds, and it has delay function to fadeOut by five (5) seconds.

Note: The “5000” figure in the script that we used for the delay function is equal to five (5) seconds in milliseconds. If you want to make it short the time interval, you can change it to three (3) seconds, then you can use “3000” instead for the “5000”. This simple tutorial, you can use it whatever you want to display temporarily kind of notifications or error to know the users. Hope that this tutorial will help you a lot. If you are interested in programming, we have an example of programs that may help you even just in small ways. If you want more tutorials, you can visit our website, click here. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.