jQuery Fading Methods
by Vincy. Last modified on July 6th, 2023.
In this tutorial, we will learn about the available jQuery fading methods list. There are four methods in jQuery to create fading effects on an HTML element. These are,
- fadeIn() – Displaying element to be faded.
- fadeOut() – Hiding element with fade-away effect.
- fadeTo() – Fading element by changing opacity
- fadeToggle() – Showing / Hiding elements with fade-in / fade-away effects, respectively.
HTML Fading Element
This HTML code contains the fading image element and the buttons to call jQuery fading methods.
<div id="menu">
<input type="button" value="Fade In" id="fade-in" /> <input
type="button" value="Fade Out" id="fade-out" /> <input type="button"
value="Fade To" id="fade-to" /> <input type="button"
value="Fade Toggle" id="fade-toggle" />
</div>
<div id="output">
<img src="fading-photo.png" id="fading-photo" />
</div>
jQuery Fading Effect Handing
This code triggers appropriate fading events based on the button click.
$(document).ready(function() {
$("#fade-in").click(function() {
$("#fading-photo").fadeIn("slow");
});
$("#fade-out").click(function() {
$("#fading-photo").fadeOut("slow");
});
$("#fade-to").click(function() {
$("#fading-photo").fadeTo("slow", 0.5);
});
$("#fade-toggle").click(function() {
$("#fading-photo").fadeToggle("slow", "linear");
});
});
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.