The fadeIn method
The fadeIn method smoothly reveals hidden elements, making them opaque. You can hide elements using the fadeOut method, making them transparent.
Syntax
Show for a given time, 400ms by default:
.fadeIn(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:
.fadeIn('slow' or either 'fast');
If you do not specify parameters, there will be no animation, the elements will be shown instantly:
.fadeIn();
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:
.fadeIn(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:
.fadeIn(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:
.fadeIn( {duration: 800, easing: easeInSine} );
Example
In the following example, when the #hide button is clicked, the element with #test will be hidden using the fadeOut method, and when the #show button is clicked, it will be shown using fadeIn. We will also set the speed to 1000ms:
<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').fadeIn(1000);
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000);
});
Example
And in the following example, after the animation ends, when the element #test is shown, we will display alert with the text '!', and when hidden, with the text '?':
<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').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
