In this article we are going to show you how to use the JQuery delay function to delay the fadeIn & fadeOut effect on an <div> (you an use almost any html element you prefer) element that we discussed in the previous post (fading in & out <div> using JQuery).
Step 1:
Lets start with the html part. You can design your <div> element as you wish but we have given down a simple example you can use that for the start :
Step 2:
Now lets look at the <head> part which is the last step, here you will include your JQuery file and also write the main coding for what you are here :
The above code shows the delay function being used to delay the fadeIn & fadeOut effect for some seconds on button click and also you have to provide the delay time in milliseconds, the above code delays the effect by 3000 mlliseconds i.e, 3 seconds. The summary of the story is : when you will click the button it will fade out or in after some seconds specified by you.
That's it guys, all you want to make an <div> fade in and again out after a delay of some seconds on button click. Try our live example below :
You can download the entire source code by clicking the below download link
Download
We hope you liked our post, if you did please share this link with your social network.
Step 1:
Lets start with the html part. You can design your <div> element as you wish but we have given down a simple example you can use that for the start :
<body>
<div style="background-color:green;width:150px;height:150px;"></div><br />
<input id="fo" type="button" value="Fade Out"></input>
<input id="fi" type="button" value="Fade In"></input>
</body>
Step 2:
Now lets look at the <head> part which is the last step, here you will include your JQuery file and also write the main coding for what you are here :
<head>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#fi").click(function(){
$("div").delay(3000).fadeIn("slow");
});
$("#fo").click(function(){
$("div").delay(3000).fadeOut("slow");
});
});
</script>
</head>
The above code shows the delay function being used to delay the fadeIn & fadeOut effect for some seconds on button click and also you have to provide the delay time in milliseconds, the above code delays the effect by 3000 mlliseconds i.e, 3 seconds. The summary of the story is : when you will click the button it will fade out or in after some seconds specified by you.
That's it guys, all you want to make an <div> fade in and again out after a delay of some seconds on button click. Try our live example below :
You can download the entire source code by clicking the below download link
Download
We hope you liked our post, if you did please share this link with your social network.
Happy Designing !
No comments :
Post a Comment