fadeIn() and fadeOut() MethodsYou can employ the jQuery fadeIn() and fadeOut() methods to reveal or conceal HTML elements by smoothly adjusting their opacity.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading in hidden paragraphs
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>Similar to other jQuery effects methods, you have the choice to specify a duration or speed parameter for the fadeIn() and fadeOut() methods. This parameter controls the duration of the fading animation. Durations can be defined using predefined strings like 'slow' or 'fast', or in milliseconds, where higher values result in slower animations.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});
</script>
Note: The fadeIn()/fadeOut() method's effect resembles that of the show()/hide() methods. However, unlike the show()/hide() methods, fadeIn()/fadeOut() only animates the opacity of the targeted elements and does not animate their dimensions.
You can also define a callback function to run after the fadeIn() or fadeOut() method finishes its animation. We'll cover more about callback functions in future chapters.
<script>
$(document).ready(function(){
// Display alert message after fading out paragraphs
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
// Code to be executed
alert("The fade-out effect is completed.");
});
});
// Display alert message after fading in paragraphs
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
// Code to be executed
alert("The fade-in effect is completed.");
});
});
});
</script>fadeToggle() MethodThe jQuery fadeToggle() method toggles the visibility of selected elements by animating their opacity. If an element is initially displayed, it will fade out; if hidden, it will fade in (i.e., toggling the fading effect).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Similarly, you have the option to specify a duration parameter for the fadeToggle() method, similar to the fadeIn()/fadeOut() methods, to control the speed of the fade toggle animation.
<script>
$(document).ready(function(){
// Fade Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").fadeToggle();
$("p.fast").fadeToggle("fast");
$("p.slow").fadeToggle("slow");
$("p.very-fast").fadeToggle(50);
$("p.very-slow").fadeToggle(2000);
});
});
</script>Similarly, you can also define a callback function for the fadeToggle() method.
<script>
$(document).ready(function(){
// Display alert message after fade toggling paragraphs
$(".toggle-btn").click(function(){
$("p").fadeToggle(1000, function(){
// Code to be executed
alert("The fade-toggle effect is completed.");
});
});
});
</script>fadeTo() MethodThe jQuery fadeTo() method is akin to the .fadeIn() method. However, unlike .fadeIn(), the fadeTo() method allows you to fade elements in to a specified opacity level.
The mandatory opacity parameter dictates the final opacity level of the target elements, ranging from 0 to 1. Additionally, you must specify a duration or speed parameter for this method, which determines how long the fade animation lasts.
<script>
$(document).ready(function(){
// Fade to paragraphs with different opacity
$(".to-btn").click(function(){
$("p.none").fadeTo("fast", 0);
$("p.partial").fadeTo("slow", 0.5);
$("p.complete").fadeTo(2000, 1);
});
});
</script>