The fadeIn() Effect is used to make the hidden element visible using fade in effect.
<html> <head> <title> My First Programme </title> <script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script> </head> <body> <h1> JQuery </h1> <p> This is a sentence </p> <button class = 'fadeOutClass'> Fade Out </button> <button class = 'fadeInClass'> Fade In </button> <script> $('button.fadeOutClass').click( function() { $('p').fadeOut(); }); $('button.fadeInClass').click( function() { $('p').fadeIn(); }); </script> </body> </html>
So, in the above example, we have a <p> element,
<p> This is a sentence </p>
And two <button> elements,
The first button is used to fade out the element.
<button class = 'fadeOutClass'> Fade Out </button>
And the second button is used to show the hidden element.
<button class = 'fadeInClass'> Fade In </button>
We have already seen, how the fade out effect works.
Now, let us see, how the fade in effect can be used to show the hidden element with fade in effect.
So, on Fade Out button click, the <p> element gets hidden with fade out effect.
<p> This is a sentence </p>
Now, to unhide the above <p> element, we have the below JQuery code,
$('button.fadeInClass').click( function() { $('p').fadeIn(); });
And JQuery locates the <p> element,
$('p').fadeIn();
And unhides the <p> element using fadeIn() effect.
Now, let's say, you want to display a message, stating the element is visible with fade in effect. And you can achieve it using a callback function.
<html> <head> <title> My First Programme </title> <script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script> </head> <body> <h1> JQuery </h1> <p> This is a sentence </p> <button class = 'fadeOutClass'> Fade Out </button> <button class = 'fadeInClass'> Fade In </button> <script> $('button.fadeOutClass').click( function() { $('p').fadeOut(); }); $('button.fadeInClass').click( function() { $('p').fadeIn(1000, function() { alert("The element is visible with fade in effect") }); }); </script> </body> </html>
So, in the above JQuery statement,
$('button.fadeInClass').click( function() { $('p').fadeIn(1000, function() { alert("The element is visible with fade in effect") }); });
Along with the fadeIn() effect, we have used the speed as the first parameter and callback function as the second parameter.
Now, if you see the callback function,
function() { alert("The element is visible with fade in effect") }
It displays an alert,
alert("The element is visible with fade in effect")
That the element is visible with fade in effect.
In simple words, on button click the <p> element is hidden with fade out effect in 1000 milliseconds and once the <p> element is completely visible after second button click, we get the alert, The element is visible with fade in effect.