How to Fadeto Div Content for Opacity Effect Using jQuery

Last Updated on September 9, 2022 by Roshan Parihar

Learn how to fadeto div content on click of the button and for the opacity effect using jquery. The short answer is to use the fadeTo() function of jQuery. The opacity will be applied to the div element with the fadeto effect of jquery.

Fadeto Div Content with Slow Speed Opacity Effect

You can apply the opacity effect to the div content with a click of the button using fadeTo() function of jQuery. It applies the CSS property opacity to the selected element. The function takes two arguments in which the first is the speed and the second is the opacity value.

If you want to give the slow speed for the opacity effect, you have to pass ‘slow’ as the argument of the first parameter of fadeto() function.

Output

This is the div content to show the example of fadeto effect.


Click the above button to see the opacity effect of jQuery. The div content may be slightly visible to the reader because opacity can be used to make content transparent to some extent.

If you want to give the speed in milliseconds, you have to check the below given an example.

Fade To Effect with Speed of 5 Second

To apply opacity to the element with a speed of 5 seconds, pass the speed value in milliseconds as the first argument of the fadeTo() function. The below example contains the speed of 5 seconds to apply the fadeto effect to the element. In addition to this, an opacity of 0.6 will be applied to the div content.

Output

This is the div content to show the example of fadeto effect.


Click the above button to apply the opacity of 0.6 to the element with some speed. You can increase or lower the speed of the fadeto effect of jQuery.

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

You May Also Like to Read