Trending October 2023 # Different Versions Of Jquery Fadein() With Examples # Suggested November 2023 # Top 12 Popular

You are reading the article Different Versions Of Jquery Fadein() With Examples updated in October 2023 on the website Saigonspaclinic.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 Different Versions Of Jquery Fadein() With Examples

Introduction to jQuery fadeIn()

There is various Effect creating techniques that are available with jQuery in order to create animations. Fading effect is one of such. fadeIn() is a method to create the fading effect by changing the opacity of the selected element to bring the visibility of the element from a hidden state to a visible state.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax:

$(selector).fadeIn([Input parameter values])

Note: Input parameters are optional.

Versions of jQuery fadeIn()

fadeIn() is added in jQuery version 1.0 and gradually evolved incorporating various features. The major changes to fadeIn() in different versions of jQuery are listed below:

Parameter Description Default Value Type Version Added

Duration To customize the duration of the fading effect. 400 milliseconds Number/String 1.0

Callback To set the function to be executed after completion FadeIn()() method. NA Function() 1.0

Easing Specifies the speed of the effect at different points of the time interval. Swing String 1.0

Queue To decide whether to arrange the animation effects in queue or not. True Boolean/String 1.0

SpecialEasing It contains multiple CSS properties and their corresponding Easing values. NA Object 1.4

Step Used to modify the value of any property of the tween object before it is set. NA Function() 1.0

Progress It can be set to call on completion of the fading effect of each matched element. NA Function() 1.8

Start This can set a function to execute before the fading effect begins. NA Function() 1.8

Done Sets the function to be called once the fading is completed over an element and the promised object is resolved. NA Function() 1.8

Fail Sets a function to execute on the failure of any animation. NA Function() 1.8

Always Sets a function to execute either on completion(promised object is resolved) or on cancellation of fading effect application(Promised object is rejected). NA Function() 1.8

Examples of jQuery fadeIn() Example #1 – Without Using any parameter (with default values)

When the fadeIn() method is used without any input value, it takes the default value for the occurrence of the fading effect.

Code:

$(document).ready(function(){ $(“p”).fadeOut(); }); $(“p”).fadeIn(); }); });

Output:

Before fadeIn() method is called:

After fadeIn() method is called:

Example #2- With Duration Parameter

The fadeIn() method accepts the first input argument as duration parameter value i.e how long the effect would run. Any numeric number can be given as duration or just the keyword “slow” or “fast” can be used which stands for 200 milliseconds and 600 milliseconds respectively.

Here the below example is given providing duration parameter value.

Code:

$(document).ready(function(){ $(“p”).fadeOut(5000); }); $(“p”).fadeIn(5000); }); });

Output:

Before fadeIn() method is called:

After fadeIn() method is called:

Example #3 – With Easing Parameter

Swing: The speed of the fading effect is slower at the beginning and at the end, faster in the middle.

Linear: The speed of the fading effect is constant throughout the execution of the function.

Code:

$(document).ready(function(){ $(“p”).fadeOut(3000,”linear”); }); $(“p”).fadeIn(3000,”linear”); }); });

Output:

Before fadeIn() method is called:

After fadeIn() method is called:

Example # 4 – With Callback Parameter

The callback parameter sets the function name which gets fired once the fading effect gets completed.

Code:

$(document).ready(function(){ $(“p”).fadeOut(function(){ alert(“fadeOut() method is finished!”); }); }); $(“p”).fadeIn(function(){ alert(“fadeIn() method is finished!”); }); }); });

Output:

Before fadeIn() method is called:

After fadeIn() method is called:

Note: Callback function does not work on the complete animation process as a whole in case multiple elements are configured for animation. Function execution occurs with each matched element, one at time.

Example #5 – Applying fadeIn() on Class Attribute

In HTML, the elements can be distinguishingly used by using class attributes or ID. Here we are going to apply the fadeIn() method to one div session using class attributes.

Code:

$(document).ready(function(){ $(“.mydiv”).fadeOut() }); $(“.mydiv”).fadeIn() }); });

Output:

Before fadeIn() method is called:

After fadeIn() method is called:

Thus fadeIn() method supports type fading effect creation. This is easy to use. It improves the effectiveness of any website in a significant manner by creating attractive animation effects. This technique supports various kinds of elements such as text, image, links, etc.

Additional Note

Mostly ‘fadeIn()’ and ‘fadeout()’ are used together to toggle the visibility of the element.

The fading effect, created by ‘fadeIn()’, is similar to ‘fadeTo’. The difference lies in these 2 methods is that maximum opacity level for fadeIn() is 1 and it is fixed; whereas fadeTo() can set an opacity value between 0 to 1.

The selected element appears immediately when the fadeIn() method has a duration set to ‘0’. In this condition, it works similar to the method, show().