jQuery Fading Methods

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,

  1. fadeIn() – Displaying element to be faded.
  2. fadeOut() – Hiding element with fade-away effect.
  3. fadeTo() – Fading element by changing opacity
  4. fadeToggle() – Showing / Hiding elements with fade-in / fade-away effect respectively.

jquery-fading-method

View DemoDownload

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 is used for triggerring 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");
});
});

View DemoDownload

This jQuery code tutorial was published on November 28, 2014.

↑ Back to Top