jQuery Fading Effects

jQuery has four useful methods which you can use to fade html elements in and out of visibility.

1. jQuery fadeIn()
2. jQuery fadeOut()
3. jQuery fadeToggle()
4. jQuery fadeTo()

1. jQuery fadeIn()

jQuery fadeIn() method is used to make an html element appear gradually on the screen. For example the following jQuery code will make a paragraph which is initially set to display none to appear on the screen gradually when the button is clicked.

To check out the complete example and more details about fadeIn() refer this: jQuery fadeIn()

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeIn();
  });
});

2. jQuery fadeOut()

jQuery fadeOut() method is used to fade out the selected elements of the html page. For example, the following jQuery code will make a paragraph disappear gradually when the button is clicked.

To check out the complete example and more details about fadeOut() refer this: jQuery fadeOut()

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeOut();
  });
});

3. jQuery fadeToggle()

jQuery fadeToggle() method is used to toggle between fadeIn() and fadeOut() effects. If the selected html elements are faded in, it will fade them out and if they are faded out then it will fade them in.

For example, the following jQuery code will toggle a paragraph between fade in and fade out on the button click event, which means if the paragraph is visible, it will make it fade out on button click and if the paragraph is not visible then it will fade in when the button is clicked.

To check out the complete example and more details about fadeToggle() refer this: jQuery fadeToggle()

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeToggle();
  });
});

4. jQuery fadeTo()

jQuery fadeTo() method adjust the opacity of selected html elements. It accepts the value between 0 and 1, where 0 means completely invisible and 1 means completely visible. We can pass the values in fraction such as 0.10, 0.34 etc.

For example, in the following code we are adjusting the opacity of three different html elements using fadeTo() method. Here we are adjusting the opacity of p, h2 and button elements, their opacity is adjusted to 0.25, 0.10 and 0.80 respectively, since the opacity of button is highest, it will be more visible compared to p and h2 elements.

To check out the complete example and more details about fadeTo() refer this: jQuery fadeTo()

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeTo("slow", 0.25);
    $("h2").fadeTo("slow", 0.10);
    $("button").fadeTo("fast", 0.80);
  });
});