Animation on modern web pages has long been taken for granted. Dissolving elements, flying 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 ensures that the transparency of the element passed to it changes to 100%. In the jQuery library, it is paired with the fadeOut() function, with which you can reset the transparency to zero and thereby "dissolve" the element.
You will be interested:
A similar effect can be achieved with the fadeTo() method, which has an even wider range of influence. FadeTo() can set any transparency value between 0 and 1.
Method Syntax
jQuery's fadeIn() method 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 amount of time the animation will take. This can be a number representing the number of milliseconds, or one of the following keywords:
- "fast" (200ms);
- "slow" (600ms);
If duration is not set, it will default to 400 milliseconds.
The callback parameter specifies a function that will be called immediately after the animation completes. The callback function does not accept any parameters. The this variable inside it refers to the DOM node being modified.
The easing argument controls the animation's timing function, that is, its speed over 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 a string containing the keyword, the default is the "swing" function.
In the following example, jQuery fadeIn() will uniformly increase the transparency of an element with the class .block for one second, after which it will print a message to the console:
$(".block").fadeIn(1000, linear, function() ( console.log("Animation complete"); ));
If the listed parameters are not enough, you can pass the config object to the method, which can contain up to 11 different settings.
Callbacks
The callback parameter passed to the jQuery fadeIn() method is a very useful option because the property change is asynchronous without blocking the overall code flow.
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 completely appear.
For everything to work as intended, you should use the callback argument to catch the end of the animation:
const callback = function() ( console.log("Animation completed"); ); $(".element").fadeIn(1000, callback);
Now the message to the console will be displayed only when the element becomes fully visible.
Full transparency and hiding the element
As you know, the 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 some block.
This is why jQuery's fade methods fadeIn(), fadeTo() and fadeOut() work with transparency in combination with the display property. A fully transparent element is hidden using the display: none rule, and before it appears, this rule is canceled.
Changes the transparency level of the selected elements on the page. Allows you to change the transparency smoothly. The method has two uses:
duration— the duration of the change in transparency. Can be given 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 is 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 being 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 run or, on the contrary, will accelerate). (see description)
callback- see above.
- change transparency
- set the transparency of an element
- set the transparency level of an element
- element transparency
- .fadeTo()
- fadeTo()
In this tutorial, we'll look at an example jQuery transparency changes. Similar topics have already been discussed in the lesson, well, there the principle of the script was based on a simple css and html, in this lesson we will also touch on jQuery plus everything, there was a simple change of the image on hover, transparency is immediately performed ( opacity).
I think that you have already watched two demos and understood the difference in how scripts work. Let's now take a look at the code for this tutorial.
First step. HTML.
And so we have a file index.php.
In it, we first include the jquery.js library. Download it for yourself and connect between tags head.
Next, we will analyze jQuery code that will interact with the class img. First, we write a function that has a class img and set transparency 50% in original position. That is, an image without hovering over it has half its transparency. Then, when an hover action is performed on the image, a function is called that toggles the position of the class img to the clear position. After the pointing to the image is completed, the function switches to the initial initial position. Image transparency attribute opacity. You can study it in detail in the documentation for css.
$(function() ( // set the opacity of the image to 50% $(".img").css("opacity","0.5"); // hover over the image $(".img").hover( function () ( // after which the transparency disappears $(this).stop().animate(( opacity: 1.0 ), "slow"); ), // after removing the mouse over the image function () ( // transparency returns to the original position 50% $(this).stop().animate(( opacity: 0.5 ), "slow"); )); ));
Second step. CSS style file.
We register the tag div and give it a class images we will specify some styles in it css for the image (if you wish, it's just better to see how this script works). Now write the tag img in it we specify the path to the image and set the class img, which interacts with jQuery code above.
Few styles css for better visibility.
Images ( border: 1px solid #363636; width: 300px; background-color: #2d2d2d; padding: 8px; )
The script is simple of a kind which makes it more relevant to apply transparency changes hover images. I advise you to play with jQuery code, where there are three functions: initial, hover and unhover. You can show variety. Suppose, in the initial position, specify opacity 0.5, on hover opacity 1.0, and from the removal of guidance opacity 0.2. It will turn out a kind of very interesting action with the image!
And again I welcome you dear readers of the blog. Today I want to tell you how to make smooth transparency of any element on the site using jQuery. What does it mean for any element? This means that you can apply this transparency to any pictures, counters, and tags on the site. All this will just decorate your resource. So let's get started.
Let me remind you that megaweb.su shared the script with us, for which many thanks to him.
Script
The very first thing to do is to include the library jQuery, in the sense, the script that needs to be put between the tags below and .
Then, right before the tag copy and paste the following jQuery script:
Copied? Congratulations, most of the work you have already done :-)
Script setup
You can fully customize this script to your taste.
- $('.megaweb') is the name of the class that will be applied to the web elements;
- animate((opacity:'0.3'),1);- this is the most optimal transparency of the element;
- animate((opacity:'1.0'),600);- transparency of the web element on hover;
- animate((opacity:'0.3'),300);- returning the element to the very first transparency, after the cursor is removed from the element.
After we have configured the script as we need, it can be applied to web design elements using a class, for example.
