In this tutorial, we are going to know about the list of available jQuery fading methods. There are four methods in jQuery to create fading effects on an HTML element. These are,
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>
This code is used for triggering 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");
});
});