Jquery smooth transparency change. How to make a smooth transparency of a web element using jQuery

The result of our example.

Animation on modern web pages has long been taken for granted. Fading elements, flying messages, sliding image galleries improve user experience and increase site performance. In the popular javascript library jQuery 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 passed element to 100%. In the jQuery library, it is paired with the fadeOut () function, which can be used to nullify the opacity and thereby "dissolve" the element.

A similar effect can be achieved with the fadeTo () method, which has an even wider range of influence. FadeTo () can set any transparency value in the range from 0 to 1.

Method syntax

The fadeIn () method in jQuery is called in the context of the element whose opacity 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 how long the animation will take. It can be a number representing the number of milliseconds, or one of the keywords:

• "fast" (200ms);
• "slow" (600ms);

If no duration is set, it defaults to 400 milliseconds.

The callback parameter denotes a function that will be called immediately after the animation finishes. The callback function does not accept any parameters. The this variable within it refers to the DOM node being modified.

The easing argument controls the timing of the animation, that is, its speed over time. You can use it to speed up the beginning and slow down the end of the animation, or to make it uniform throughout. The argument value is a string containing the keyword, by default this is the "swing" function.

In the following, fadeIn () will uniformly increase the transparency of the element with class .block for one second, after which it will print a message to the console:

$ (". block"). fadeIn (1000, linear, function () (console.log ("Animation completed");));

If the listed parameters are not enough, the method can be passed a config object, which can contain up to 11 different settings.

Callback functions

The callback parameter passed to jQuery's fadeIn () method is a very useful option because property changes are performed asynchronously without blocking the general flow of code execution.

Const callback = function () (console.log ("Animation completed");); $ (". element"). fadeIn (1000); callback ();

In this example, the function will run immediately after the animation starts, without waiting for the element to appear completely.

For everything to work as intended, use the callback argument to catch the end of the animation:

Const callback = function () (console.log ("Animation completed");); $ (". element"). fadeIn (1000, callback);

Now a message will be displayed in the console only when the element becomes fully visible.

Full transparency and element hiding

As you know, zero value of the opacity property does not remove the element from the page, but only makes it invisible. This behavior is not suitable if we want to hide a block.

Therefore, the jQuery fade methods 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 this rule is canceled before it appears.

Changes the transparency level of the selected elements on the page. Allows you to change transparency smoothly. The method has two use cases:

duration- the duration of the change in transparency. It can be specified in milliseconds or the string value "fast" or "slow" (200 and 600 milliseconds).
opacity- the value of the required transparency. Must be specified as a number from 0 to 1 (0 - full transparency, 1 - no transparency).
callback- the function specified as the transparency change completion handler. No parameters are passed to it, however, inside the function, the this variable will contain the DOM object of the element whose transparency is changed. If there are several such elements, then the handler will be called separately, for each element.

duration- see description above. By default, the parameter is 400
opacity- see above.
easing- the dynamics of the change in transparency (whether it will slow down by the end of the execution or, on the contrary, it will accelerate). (see description)
callback- see above.

• change transparency
• set transparency to an element
• set transparency level to element
• element transparency
• .fadeTo ()
• fadeTo ()

Last updated: 1.11.2015

Transparency effects allow us, by smoothly changing the transparency of an element, to hide or show it. Transparency effects are implemented using the fadeOut (), fadeIn (), fadeTo (), and fadeToggle () methods.

The fadeOut (), fadeIn (), and fadeToggle () methods have similar uses:

fadeOut / fadeIn / fadeToggle (): method with no parameters

fadeOut / fadeIn / fadeToggle ([, easing] [, complete]). The duration parameter specifies how long the element's opacity change will take. By default, its value is 400 milliseconds.

The easing parameter, which takes the name of the easing function as a string. By default, its value is "swing". You can also use the "slow" and "fast" values, which correspond to effect durations of 600 and 200 milliseconds.

The complete parameter represents a callback function to be called by the method when the animation has finished

The fadeTo method, unlike other methods, also accepts the opacity parameter - it takes a value to which the transparency of the element must be changed: fadeTo (duration, opacity [, easing] [, complete]). The opacity value ranges from 0 (fully transparent) to 1 (fully visible).

Let's say we have an image on the page and two buttons that will change the transparency of this image:

Display Hide

Note that the fadeIn method increases the transparency to the value it was before using the fadeOut method, and not necessarily to 1. That is, in this case, since the fadeTo method was applied at the beginning and the transparency was changed to 0.6, the fadeIn method will also increase transparency up to 0.6.