Fading is the property that allows manipulating the opacity (transparency) of HTML elements. JQuery offers four fading methods that allow you to change the transparency of elements. These methods include, fadeIn(), fadeOut(), fadeToggle(), and fadeTo().

This article explores the fading methods in jQuery and serves the following learning outcomes.

  • working of jQuery fading methods
  • using jQuery fading methods

How to use jQuery fading methods

As discussed earlier, jQuery has four fading methods and a deep insight into all those methods is provided here.

How to use the fadeIn() method

The fadeIn() method displays the element by increasing the opacity. The syntax of this method is provided below:

$(selector).fadeIn(speed,callback);

The syntax has the following instances

  • selector can be any element or may refer to the class or id of any element.
  • speed can be specified in either of four values: slow, medium, fast, and milliseconds.
  • callback is the optional parameter and is exercised after the function is executed successfully.

Example

The code provided below shows the usage of jQuery fadeout() method.

jQuery

$(document).ready(function(){

$(“.fadein”).click(function(){


 $(“.slow”).fadeIn(“slow”);


 $(“.fast”).fadeIn(“fast”);


 $(“.mili”).fadeIn(2000);

});

});

The code is described as,

  • .fadein refers to the button class and upon clicking the button, it will fade-in the paragraphs
  • the .slow, .fast, and .mili classes refer to three paragraphs that will be faded-in at various speeds

Note: The display property of the element(that you are going to fade-in) must be set to none.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image9-21.png" data-lazy- height="606" src="data:image/svg xml,” width=”723″>

Output

As we are fading-in and the display property of paragraphs is set to none. Thus, the paragraphs will be hidden on running the page.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image10-16.png" data-lazy- height="63" src="data:image/svg xml,” width=”356″>

After clicking the button, you will observe that the paragraphs will appear depending on the speed as shown in the image below.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image8-24.png" data-lazy- height="238" src="data:image/svg xml,” width=”871″>

How to use fadeOut() method

The fadeOut() method fades out the displayed element by decreasing the opacity of the element. The syntax of this method is provided below:

$(selector).fadeOut(speed,callback);

Example

The code written below shows the usage of jQuery fadeout() method.

<script>

$(document).ready(function(){

  $(“.fadeout”).click(function(){

    $(“.slow”).fadeOut(“slow”);

    $(“.fast”).fadeOut(“fast”);

    $(“.mili”).fadeOut(1000);

  });

});

</script>

The above code is described as,

  • .fadeout class of button is used which will fade-out the paragraphs
  • the .slow, .fast, and .mili are the class names set for paragraphs and will be used to fadeout as well as for styling

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image12-10.png" data-lazy- height="598" src="data:image/svg xml,” width=”790″>

Output

In the  fadeout() method, the paragraphs will be displayed as shown below.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image11-12.png" data-lazy- height="244" src="data:image/svg xml,” width=”873″>

After clicking the button, the paragraphs will fade-out.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image2-51.png" data-lazy- height="54" src="data:image/svg xml,” width=”319″>

How to use fadeTo() method

The fadeTo() method works on the principles of fadeOut() method. However, fadeTo() fades the element by using a numeric range (0-1). This opacity range defines the opacity level of the element, the higher the number higher will be the opacity and vice versa. The syntax is provided below:

$(selector).fadeTo(speed,opacity,callback);

The opacity parameter accepts 0 to 1 value.

Example

The code provided below practices the fadeTo() method.

<script>

$(document).ready(function(){

  $(“.fadeto”).click(function(){

    $(“#min”).fadeTo(“slow”, 0);

    $(“#avg”).fadeTo(“slow”, 0.5);

    $(“#max”).fadeTo(“slow”, 1);

  });

});

</script>

The code is described as,

  • .fadeto refers to the button class
  • the #min, #avg, and #max represents the id’s of three div tags, and these id’s refer to the values that will be used for fadeTo() method
  • the fading value varies from 0 to 1 in fadeTo() methods

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image1-48.png" data-lazy- height="603" src="data:image/svg xml,” width=”736″>

Output

Before applying fadeTo() method

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image4-48.png" data-lazy- height="209" src="data:image/svg xml,” width=”873″>

After applying fadeTo() method

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image3-47.png" data-lazy- height="209" src="data:image/svg xml,” width=”874″>

From the above output, it is observed that the paragraph having value 0 has been washed out.

How to use fadeToggle() method

The fadeToggle() method lies between fadeIn() and fadeOut() methods. By using fadeToggle(), you can display a hidden element and can hide a displayed element. The syntax of this method is:

$(selector).fadeTo(speed,callback);

Example

The code provided below functions to use the fadeToggle() method.

<script>

$(document).ready(function(){

  $(“.fadetoggle”).click(function(){

    $(“#slow”).fadeToggle(“slow”);

    $(“#fast”).fadeToggle(“fast”);

    $(“#mili”).fadeToggle(1000);

  });

});

</script>

  • .fadetoggle class refers to the button
  • the #slow, #fast, and #mili represents various id’s of div

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image7-32.png" data-lazy- height="600" src="data:image/svg xml,” width=”795″>

Output

Before clicking the button

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image5-33.png" data-lazy- height="197" src="data:image/svg xml,” width=”872″>

After clicking the button,

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image6-31.png" data-lazy- height="56" src="data:image/svg xml,” width=”369″>

It is concluded that, if the element is displayed, it will be hidden after fadeToggle() method ( as fadeOut() method does). Similarly, if the element is in fadeOut() state, then the fadeToggle()will act as a fadeIn() method.

Conclusion

jQuery provides various fading methods that include fadeIn(), fadeOut(), fadeToggle(), and fadeTo() that assist in fading HTML elements. This guide provides the working and usage of each jQuery fading method. The fadeIn() method displays element if it is hidden whereas the fadeOut() hides the element. The fadeTo() method fade’s in or out depending on the opacity number. Lastly, the fadeToggle() method functions between fadeIn() and fadeOut() methods.

Show Comments