jQuery Effect fadeTo() Method

Quiz

The fadeTo() method in jQuery is used to gradually change the opacity of selected elements to a specified opacity level over a specified duration.

A fading effect is a visual transition where an element gradually becomes more transparent (fades out) or less transparent (fades in) over a specified period of time. This effect is achieved by adjusting the opacity property of the element through CSS or JavaScript animations.

Syntax

Following is the syntax of fadeTo() method in jQuery −

$(selector).fadeTo(speed,opacity,easing,callback)

Parameters

This method accepts the following parameter −

speed: A string or number determining how long the animation will run. It can be 'slow', 'fast', or a numeric value in milliseconds.
opacity: A number between 0 and 1, representing the opacity level. 0 means fully transparent, and 1 means fully visible.
easing (optional): Specifies the speed of the element in different points of the animation. Default value is "swing".
callback (optional): A function to call once the animation is complete.

Example 1

In the following example, we are fading out a <div> element slowly by changing its opacity to 0 −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").fadeTo("slow", 0);
  });
});
</script>
</head>
<body>

<button>Click to Fade</button>
<div style="background-color: #40a944; width: 200px; height: 200px;">This is a div element</div>
</body>
</html>

When we click the button it fades out a <div> element gradually to the opacity level 0.

Example 2

In this program, the <div> element starts with display: none;, so it's initially hidden. However, when the page loads, fadeTo() method fades it in over the duration of "slow" −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("div").fadeTo("slow", 1);
});
</script>
</head>
<body>
<div style="background-color: #40a944; width: 200px; height: 200px; display: none;">This is a div element</div>
</body>
</html>

When we load the page or execute the example, the hidden <div> element will be faded to the opacity level of 1.

Example 3

In this example below, we are passing an optional parameter "callback" to the fadeTo() method −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").fadeTo("slow", 0, function(){
      alert("Fade out complete!");
    });
  });
});
</script>
</head>
<body>
<button>Click</button>
<div style="background-color: #40a944; width: 200px; height: 200px;">This is a div element</div>
</body>
</html>

When the button is clicked, the <div> element will gradually fade out over the duration of "slow". After the fade out animation completes, the specified callback function is executed, which displays an alert message saying "Fade out complete!".

jquery_ref_effects.htm

Print Page