How To Display An HTML Element After Few Seconds ( delay )
By Saruque Ahamed MollickHello learners, in this tutorial I am gonna show you an easy and effective way to Show or Display HTML Element After n Seconds with jQuery.
Here I will also explain how to do this and you will get to know how to make it appear slowly with fadeIn.
I will use jQuery in order to do this. It’s very useful because in many cases it is seen that we need to show some content of a webpage after few seconds of loading the page.
Also read,
Upload File With Ajax Using PHP and jQuery
Real Time Chat Application PHP With File Transfer System AJAX
Free Currency Converter PHP using Fixer io API
Display an HTML Element after few seconds with jQuery
so, let’s first create an HTML element.
<!DOCTYPE html> <html> <body> <p id="codespeedy">Hey this is saruque</p> </body> </html>
Now, we gonna make the paragraph hidden and will appear on the webpage after a particular time with fade in slowly.
<!DOCTYPE html>
<html>
<body>
<p id="codespeedy">Hey this is saruque</p>
<script type="text/javascript">
$(document).ready(function(){
$('#codespeedy').hide().delay(3000).fadeIn('slow');
});
</script>
</body>
</html>
The above script will display the element after 3 seconds of loading the webpage.
hide() method will hide the text Hey this is saruque at first. Then delay() method will create a delay. We can pass time as the parameter here. Here we put 3000 for creating a delay of 3 seconds.
fadeIn(‘slow’) is optional. I have used it because when an element appears slowly it looks cool.
You can change the delay time as well as fadeIN propery.
you can pass miliseconds, fast and slow as the fadeIn parameter.
Also read,
Leave a Reply