How to make a web element transparent with jQuery. How to Make a Web Element Smooth Transparency with jQuery Jquery Smooth Transparency Change
jQuery effectsDefinition and application
jQuery method .fadeTo() allows you to change the transparency level of the selected elements.
Method .fadeTo() similar to the .fadeIn() method, but unlike it, it allows you to control the required level of transparency of elements.
jQuery syntax:
Syntax 1.0:$(selector ).fadeTo( duration, opacity, complete) duration- Number , or String opacity- Number (0 - 1) complete-Function Syntax 1.4.3:$(selector ).fadeTo( duration, opacity, easing, complete) duration- Number , or String opacity- Number (0 - 1) easing- String complete-FunctionAdded in jQuery version
1.0 (syntax updated in version 1.4.3)Parameter values
| Parameter | Description |
|---|---|
| duration | A string or numeric value that determines how long the animation will continue. Default value 400(in milliseconds). String keywords fast and "slow" correspond 200 and 600 milliseconds respectively (higher values indicate a slower animation, lower values indicate a fast one). |
| opacity | Numeric value between 0 and 1 A that indicates transparency for the element ( 1 - the element is opaque, 0.5 - mean, 0 - the element is completely transparent). |
| easing | Keyword (string) that defines the velocity curve for animation (using a mathematical function - a cubic Bezier curve). Without the use of external plugins, it only has two meanings - linear(an animation effect with the same speed from start to finish) and swing(the animation effect has a slow start and a slow end, but the speed increases in the middle of the animation). Default value swing. |
| complete | A function to be executed after the animation is complete, it is called once for each matched element. Inside the function, the this variable refers to the DOM element on which the animation is being applied. |
Usage example
.fadeTo()
The result of our example:
Consider the following example, in which we set the method fadeTo() callback function:
In this example using jQuery method .fadeTo() when we click on the button, we linearly change the transparency of the elements
The result of our example.
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 with 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 you need to put below between the tags 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.
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. File css styles.
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!
Last update: 1.11.2015
Transparency effects allow us to smoothly change the transparency of an element, hide it 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 transparency change will last. Its default value is 400 milliseconds.
The easing parameter, which takes the name of the animation's easing function as a string. Its default value is "swing". You can also use the values "slow" and "fast" , which correspond to the duration of the effect in 600 and 200 milliseconds.
The complete parameter represents the callback function that the method will call when the animation completes.
The fadeTo method, unlike other methods, also accepts an opacity parameter - it takes a value to which the element's transparency should be changed: fadeTo(duration, opacity [, easing][, complete]) . The opacity value is a value between 0 (fully transparent) and 1 (fully visible).
Let's say we have an image on the page and two buttons that will change the transparency of this image:
Please note that the fadeIn method increases the transparency to the value that 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.
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()
