How to Fade Toggle Div Element with Certain Time Delay

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.

Output

This is the simple div element to explain the working of fadetoggle


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().

Output

This is the simple div element to explain the working of fadetoggle


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.

Output

This is the simple div element to explain the working of fadetoggle


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