Updated March 20, 2023
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.
Syntax:
$(selector).fadeIn([Input parameter values])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()
Various ways of using fadeIn() are discussed with examples as follows:
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:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut();
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body style="background-color: antiquewhite;">
<h3>Using the method "fadeIn()" without any parameter:</h3>
<p style="font-family: Arial, Helvetica, sans-serif;display:none;">This paragraph is appeared after the "Fade In" button is clicked </p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button></div>
</body>
</html>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:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(5000);
});
$(".btn2").click(function(){
$("p").fadeIn(5000);
});
});
</script>
</head>
<body style="background-color: antiquewhite;">
<h3>Using the method "fadeIn()" with 'duration'parameter:</h3>
<p style="font-family: Arial, Helvetica, sans-serif;display:none;">This paragraph is appeared in 5000 millisecond,after the "Fade In" button is clicked </p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button></div>
</body>
</html>Output:
Before fadeIn() method is called:
After fadeIn() method is called:
Example #3 – With Easing Parameter
The easing parameter lets the user decide the speed of the effect at different points of time. It has only two possible values:
- 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.
The code shown in the below example is designed to have linear fadeIn() effect on <p> element.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(3000,"linear");
});
$(".btn2").click(function(){
$("p").fadeIn(3000,"linear");
});
});
</script>
</head>
<body style="background-color: antiquewhite;">
<h3>Using the method "fadeIn()" with 'easing'parameter:</h3>
<p style="font-family: Arial, Helvetica, sans-serif;display:none;">This paragraph is appeared in a linear speed,after the "Fade In" button is clicked </p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button></div>
</body>
</html>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:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(function(){
alert("fadeOut() method is finished!");
});
});
$(".btn2").click(function(){
$("p").fadeIn(function(){
alert("fadeIn() method is finished!");
});
});
});
</script>
</head>
<body style="background-color: antiquewhite;">
<h3>Using the method "fadeIn()" with 'callback'parameter:</h3>
<p style="font-family: Arial, Helvetica, sans-serif;display:none;">The Alert message appeared from callback function<br>
after the text message being visible. </p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button></div>
</body>
</html>Output:
Before fadeIn() method is called:
After fadeIn() method is called:
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:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(".mydiv").fadeOut()
});
$(".btn2").click(function(){
$(".mydiv").fadeIn()
});
});
</script>
</head>
<body style="background-color: antiquewhite;">
<div>
<h4>Click on 'Fade In' button</h4>
<div class="mydiv" style='display:none;font-family: Arial, Helvetica, sans-serif;'>The fading effect fadeIn() is used on 'mydiv' class</div>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button></div>
</body>
</html>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().
Recommended Articles
This is a guide to jQuery fadeIn(). Here we discuss the different versions of jQuery fadeIn() along with the examples and code implementation. You may also look at the following articles to learn more –
