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.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-fadeto").click(function(){ $("#div-fadeto").fadeTo("slow",0.3); }); }); </script> <div id="div-fadeto">This is the div content to show the example of fadeto effect.</p> <button id="btn-fadeto" class="btn btn-primary">Click me to fadeto</button> |
Output
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.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-fadetospeed").click(function(){ $("#div-fadetospeed").fadeTo("5000",0.6); }); }); </script> <div id="div-fadetospeed">This is the div content to show the example of fadeto effect.</p> <button id="btn-fadetospeed" class="btn btn-primary">Click me to fadeto</button> |
Output
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
Advertisements
Advertisements