BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery fadeTo() Method

Last Updated: April 24, 2019 by Chaitanya Singh | Filed Under: jQuery

In this tutorial, we will discuss fadeTo() method, which is used to adjust the opacity of html elements.

jQuery fadeTo() Method Syntax

$(selector).fadeTo(speed, opacity, callback_function);

$(selector) is any jQuery Selector, which is used to select the html elements on which this effect is being applied.

speed is a required parameter in fadeTo() method, it can take values in milliseconds or string values like “slow” or “fast”.

opacity is the required parameter that can take values between 0 and 1, 0 means completely invisible while 1 means completely visible. The values can be passed in decimal points such as 0.5, 0.25 etc.

callback_function is an optional parameter which defines a function that executes when the effect is complete.

jQuery fadeTo() Example

In the following example, we have adjusted the opacity of different html elements with different values using fadeTo() method. Highest opacity value is 1 (completely visible) and lowest opacity value is 0 (completely invisible). As you can see in the output screenshots that higher opacity element is more visible than lower opacity element.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeTo("slow", 0.25);
    $("h2").fadeTo("slow", 0.10);
    $("button").fadeTo("fast", 0.80);
  });
});
</script>
</head>
<body>

<h2>jQuery fadeTo effect example</h2>
<p>This tutorial is published on beginnersbook.com. We have adjusted
the opacity of different html elements on this page in the script part, lets
see how they look after the button click event.</p>
<button>FadeTo</button>
</body>
</html>

Output:
Before fadeTo button is clicked:
jQuery fadeTo
After fadeTo button is clicked:
As you can see that the h2 element has the lowest visibility because we have set the lower opacity value for h2 element and the button has the highest visibility due to the high opacity value set using fadeTo() method.
jQuery fadeTo() method example

jQuery fadeTo() Example with speed and callback function.

We can pass the callback function as a parameter in the fadeTo() method. Here we have taken the same example that we have seen above, we have just changed the script part. We have set an alert using callback function that executes once the fade to effect is complete.

$(document).ready(function(){
  $("button").click(function(){
    $("p") .fadeTo("slow", 0.25, function(){
      alert("The paragraph opacity has been adjusted.");
    });
  });
});

Output:
jQuery fadeTo() method speed and callback function parameters

❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery – Chaining multiple effects
  3. jQuery removeClass() Method
  4. jQuery slideToggle()
  5. jQuery Sliding Effects

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

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

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap