The fadeTo method

The fadeTo method smoothly changes the opacity of an element to a given value, in the range from 0 to 1.

Syntax

Duration and transparency are specified for any use of the method. The change in transparency over a given time, 400ms by default:

.fadeTo(duration, transparency value);

Time can be specified not only in milliseconds, but also using the keywords slow (600ms) and fast (200ms), the higher the value, the slower the animation:

.fadeTo('slow' or either 'fast', transparency value);

You can also pass a callback function as the third (optional) parameter - it will be triggered after the animation is completed:

.fadeTo(duration, transparency value, [callback-function office]);

You can also pass a smoothing function and a callback function (optional parameters) - it will be triggered after the animation is completed:

.fadeTo(duration, transparency value, [smoothing function], [callback-function office]);

Example

In the following example, using the fadeTo method, when the #hide button is pressed, the element with #test will be hidden by reducing the opacity to 0.5, and on #show it will be shown:

<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#show').on('click', function() {
	$('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
	$('#test').fadeTo(1000, 0.5);
});

The fadeTo method

Syntax

Example

See also