The fadeToggle method

The fadeToggle method fades elements in and out by animating their transparency.

Syntax

Show/hide for a given time, 400ms by default:

.fadeToggle(duration);

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:

.fadeToggle('slow' or either 'fast');

If you do not specify parameters, there will be no animation, the elements will be shown/hide instantly:

.fadeToggle();

You can also pass the smoothing function as the second parameter, and the callback function as the third parameter - it will be triggered after the animation is completed. Both parameters are optional:

.fadeToggle(duration, [smoothing function], [callback-function office]);

You can pass various options to the method, in the form of a JavaScript object containing key:value pairs:

.fadeToggle(options);

Such an object can pass the following parameters and functions - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. You can see the description of these parameters for the method animate. For example, let's set the duration and the smoothing function:

.fadeToggle( {duration: 800, easing: easeInSine} );

Example

In the following example, the first time you click the #toggle button, the element with #test will be hidden, and the second time you click it, it will be shown. To do this, we use the fadeToggle method. We also set the speed to 1000ms and the easing function value to linear:

<button id="toggle">toggle</button>
<div id="test"></div>

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

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

The fadeToggle method

Syntax

Example

See also