Be careful while using these methods, as these are case sensitive. The first two methods that I’ll explain with examples are the fadeIn() and fadeOut() methods, followed by the fadeToggle() method.
jQuery fadeIn() and fadeOut() Methods
The jQuery fadeIn() method fades in all matched elements that you wish to explicitly define for fading in, using its unique id or a class.
Syntax
$(selector).fadeIn (speed, callback);
The fadeIn() method takes two optional parameters, speed and callback function. You can define its speed using the keywords either slow or fast or by defining a value in milliseconds. For example,
$('element').fadeIn('slow');
or
$('element').fadeIn('fast');
or
$('element').fadeIn(2000);
Do not define values in milliseconds between '' (quotes).
Similarly, the jQuery fadeOut() method takes two optional parameters just like the fadeIn() method. Therefore, I am not repeating the above examples. Simply change the method to fadeOut().
Note: You can define a value for the optional callback function, which it will execute after the fading is complete.
Now, let us see a working example. Just add two buttons on your web page along a label element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<p>Click the first button to Fadein a text!</p>
<button id="btFadeIn">Fade In</button>
<button id="btFadeOut">Fade Out</button>
<p><label id="lbl">Hello! Can you see me now? </label></p>
</body>
<script>
$(document).ready(function () {
$('#lbl').hide(); // HIDE LABEL ELEMENT WHEN PAGE LOADS.
// jQuery fadeIn() METHOD.
$('#btFadeIn').click(function () {
$('#lbl').fadeIn(3000, function () {
$(this).append("<br />Click Fade Out button and I'll fade out in 5 seconds");
});
});
// jQuery fadeOut() METHOD.
$('#btFadeOut').click(function () {
$('#lbl').fadeOut(5000, function () {
$(this).html("Hello! Can you see me now?");
});
});
});
</script>
</html>I am hiding the label element lbl when the page first loads.
$('#lbl').hide();
This is necessary as the fadeIn() method will fade in an hidden element.
Note: You can also set the label’s style as display:none; for the fadeIn() method to work efficiently. For example, in the markup section re-define the label element like this.
<p><label id="lbl" style="display:none;">Hello! Can you see me now? </label></p>With fadeIn() method, I have set 3000 milliseconds (that is 3 seconds) and for fadeOut() the value is 5000 milliseconds (that is 5 seconds). Try using slow and fast values as parameter and see what happens.
👉 You may also like What is the difference between jQuery .empty() and .remove() Methods 
jQuery fadeToggle() Method
The fadeToggle() method combines both fadeIn() and fadeOut() methods. This is necessary when you wish to toggle fade in and fade out elements with the click of a button.
Syntax
$(selector).fadeToggle(speed, callback);
Just like the previous two methods that we have discussed above, the fadeToggle() method takes two parameter, that is, speed and callback. The values for the parameters are the same as the methods defined above.
Simply, add another button element on your web page like this.
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button id="btFadeToggle">jQuery fadeToggle()</button>
<p><label id="lbl">Hi! Click the button to fade out and fade in this text. </label></p>
</body>
<script>
$(document).ready(function () {
$('#btFadeToggle').click(function () {
$('#lbl').fadeToggle(2000, function () {
$(this).html("Hi! Can you see me now?");
});
});
});
</html>Well, that’s it. Thank for reading ☺.