Last Updated on September 9, 2022 by Roshan Parihar
Learn how to fade toggle div element with time delay on button click using jquery. The short answer is to use the fadeToggle() function with delay() with time in millisecond.
In this tutorial, you will learn how to fade toggle normally, with a time delay or with toggle speed.
How to Fade Toggle Div Element
You can use fadeToggle() function of jQuery to fadein and fadeout a div element. Click event is the popular event many developers using to fade toggle div element on click of the button.
Below is the example to fade toggle normally without any speed or time delay. It’s a simple fadein and fadeout effect to perform on click of the same button.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document.ready(function(){ $('#btnFadetoggle').click(function(){ $('#Divfadetoggle').fadeToggle(); }); }); </script> <div id="Divfadetoggle">This is the simple div element to explain the working of fadetoggle</div> <button id="btnFadetoggle" class="btn btn-primary" type="button">FadeToggle Normal</button> |
Output
The fadeToggle() function perform both fadein and fadeout animation effect on the same button click. If the div is in a hidden state, the fade toggle function displays the div element. If the div is in a visible state, the fade toggle function hides the div element by adding the CSS property display:none.
Fade Toggle Div Element with Some Speed
You can also pass the speed in milliseconds as the argument of the fadeToggle() function. If you want to add speed 5 second, you have to add 5000 as the argument of the fadeToggle().
|
1 2 3 4 5 6 7 8 9 |
<script> $(document.ready(function(){ $('#btnFadetoggleSpeed').click(function(){ $('#DivfadetoggleSpeed').fadeToggle(2000); }); }); </script> <div id="DivfadetoggleSpeed">This is the simple div element to explain the working of fadetoggle</div> <button id="btnFadetoggleSpeed" class="btn btn-primary" type="button">FadeToggle wth Speed</button> |
Output
In the above example, the speed of the fadein and fadeout effect is 2 second. We use 2000 as the argument of the fadeToggle function because the speed is in a milliseconds.
Fade Toggle with Certain Time Delay
In addition to speed of the fade effect, you can also add certain time delay to the div element. The delay is the time you can give to the fadeToggle() function to perform some delay to the fade effect.
The dalay() can be used to give certain time delay to perform the fade effect. The argument for the delay function is in millisecond.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document.ready(function(){ $('#btnFadetoggleDelay').click(function(){ $('#DivfadetoggleDelay').delay(900).fadeToggle(); }); }); </script> <div id="DivfadetoggleDelay">This is the simple div element to explain the working of fadetoggle</div> <button id="btnFadetoggleDelay" class="btn btn-primary" type="button">FadeToggle with Delay</button> |
Output
In the above example, the delay to perform the fade effect is 900ms. When you click the above button, it fade toggle the content with some fade effect of jQuery.
If you want to learn more about the fading effect, you should read jQuery fading effect page.
You May Also Like to Read