Animation on modern web pages has long been taken for granted. Dissolving elements, emanating messages, sliding image galleries improve the user experience and increase the performance of the site. In the popular jQuery javascript library, fadeIn () is one of the basic animation functions. It controls the transparency of the blocks.
Fade effects
The fadeIn () method changes the transparency of the element passed to it to 100%. In the jQuery library, it is paired with the fadeOut () function, with which you can reset the transparency and thereby "dissolve" the element.
A similar effect can be achieved using the fadeTo () method, whose range of influence is even wider. FadeTo () can set any transparency value between 0 and 1.
Method Syntax
The fadeIn () method in jQuery is called in the context of the element whose transparency needs to be changed. It can take from zero to three parameters:
element.fadeIn(); element.fadeIn(duration); element.fadeIn(duration, callback); element.fadeIn(duration, easing, callback); element.fadeIn(config);
The duration argument specifies the time during which the animation will take place. This can be a number indicating the number of milliseconds, or one of the keywords:
'fast' (200ms);'slow' (600ms);
If duration not set, it will default to 400 milliseconds.
The callback parameter denotes the function that will be called immediately after the completion of the animation. The callback function does not accept any parameters. The this variable inside it refers to the mutable DOM node.
The easing argument controls the time function of the animation, that is, its speed versus time. With it, you can speed up the beginning and slow down the end of the animation or make it uniform throughout. The value of the argument is the string containing the keyword; by default, this is the 'swing' function.
In the following example, jQuery fadeIn () will uniformly increase the transparency of an element with the .block class for one second, after which it will display a message in the console:
$('.block').fadeIn(1000, linear, function() { console.log(' '); });
If the above parameters are not enough, you can pass a config object to the method, which can contain up to 11 different settings.
Callback functions
The callback parameter passed to the jQuery fadeIn () method is a very useful option, since changing the property is asynchronous, without blocking the overall code execution flow.
const callback = function() { console.log(' '); }; $('.element').fadeIn(1000); callback();
In this example, the function will start immediately after the start of the animation, without waiting for the complete appearance of the element.
To make it work as intended, you should use the callback argument, which allows you to catch the end of the animation:
const callback = function() { console.log(' '); }; $('.element').fadeIn(1000, callback);
Now the message to the console will be displayed only when the element becomes fully visible.
Full transparency and hiding element
As you know, the zero value of the opacity property does not remove an element from the page, but only makes it invisible. This behavior is not good if we want to hide some kind of block.
Therefore, the fade methods of the jQuery library: fadeIn (), fadeTo (), and fadeOut () work with transparency in combination with the display property. A completely transparent element is hidden using the display: none rule, and before it appears, this rule is canceled.