Fade in and Fade out effects in jQuery

Fade in and Fade out effects in jQuery


In the following lesson, Taimienphi.vn will introduce you more about Fade in and Fade out effects in jQuery, in addition readers can refer to some other lessons already on Taimienphi.vn to learn more. on how to hide HTML elements using the hide () and show () methods in jQuery.


Fade in and Fade out effects in jQuery

Refer to the following jQuery lesson of Taimienphi.vn to learn details about Fade in and Fade out effects in jQuery.

Table of Contents:
1. fadeIn () and fadeOut () methods in jQuery
2. fadeToggle () method in jQuery
3. fadeTo () method in jQuery

1. fadeIn () and fadeOut () methods in jQuery

In addition to the modal hide () and show (), We can use methods fadeIn () and fadeOut () in jQuery to show or hide HTML elements by ascending or descending effects.

For example: The following example illustrates how to use fadeIn () and fadeOut () methods in jQuery to hide and show HTML elements:

Understanding fade in and fade out in jquery

The output will look like the following:

Understanding fade in and fade out in jquery 2

Like the other effects methods in jQuery, we can customize the time parameters for fadeIn () and fadeOut () methods to control the time the animation runs.

To customize the duration parameter, we will use one of the predefined “fast” or “slow” strings or the time is in milliseconds, the higher the value the slower the animation display speed.

For example: The following example illustrates how to customize the amount of time the animation runs:

Understanding fade in and fade out in jquery 3

The output will look like the following:

Understanding fade in and fade out in jquery 4

Note: Basically the effect of fadeIn () / fadeOut () methods is similar to the show () / hide () methods, except fadeIn () / fadeOut () methods will fade / increase the effect. target elements.

Similarly, we can also specify a callback function to be executed after the fadeIn () / fadeOut () methods are completed.

For example: In the following example we will specify a callback function to be executed after the fadeIn () / fadeOut () methods are completed:

Understanding fade in and fade out in jquery 5

The output will look like the following:

Understanding fade in and fade out in jquery 6

2. fadeToggle () method in jQuery

Method fadeToggle () In jQuery show or hide selected elements by activating the fade effect (or ascending) in such a way that if the original elements are displayed then the effect will fade, or if the original is hidden. then that element will be shown the ascending effect.

For example: The following example illustrates how to use the fadeToggle () method in jQuery to show or hide selected elements:

Understanding fade in and fade out in jquery 7

The output will look like the following:

Understanding fade in and fade out in jquery 8

In addition, we can also specify the time parameters for the fadeToggle () method similar to the fadeIn () / fadeOut () methods to control the time of hiding the animation.

For example: In the following example we will specify a duration parameter to control the time the animation is hidden:

Understanding fade in and fade out in jquery 9

The output will look like the following:

Understanding fade in and fade out in jquery 10

Similarly, we can also specify the function callback for the fadeToggle () method.

For example: Refer to the example below to learn how to specify the callback function for fadeToggle () method:

Understanding fade in and fade out in jquery 11

The output will look like the following:

Understanding fade in and fade out in jquery 12

3. fadeTo () method in jQuery

Basically modal fadeTo () In jQuery the method is similar.fadeIn (), just different method fadeTo () Allows users to obscure elements to a specific level.

$ (selector) .fadeTo (speed, opacity, callback);

The opacity parameter required to specify the opacity for the target element can be a number between 0 and 1. In addition, this method also requires a length parameter to specify the amount of time the animation will fade.

For example: The following example illustrates how to use the fadeTo () method in jQuery:

Understanding fade in and fade out in jquery 13

The output will look like the following:

Understanding fade in and fade out in jquery 14

Above, you have read with Taimienphi.vn to learn about Fade in and Fade out effects in jQuery. In the next lesson, Taimienphi.vn will introduce you further Slide effects in jQuery.

https://thuthuat.taimienphi.vn/hieu-ung-fade-in-va-fade-out-rong-jquery-51485n.aspx
In addition, if you have any questions or questions, you can leave your comments in the comment section below the article.

.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *