Learn how to fade toggle div element with time delay using jquery. You can also give speed to fade toggle a div content on click of the button using jquery.

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() to fadein and fadeout a div content. Click event is the popular event many developrs using to fadetoggle 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 fade toggle() function perform both fadein and fadeout animation. 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 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 millisecond.

Fade Toggle Div Element with 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 use 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.

If you want to learn more about the fading effect, you should read jQuery fading effect page.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.