jQuery Fade

jQuery fadeIn() and fadeOut()

The jQuery fadeIn() effect is used to display the html element gradually on the web page and jQuery fadeOut() effect is used to hide the html element gradually on the web page.

Syntax for fadeIn:

$(selector).fadeIn();   

Syntax for fadeOut:

$(selector).fadeOut();     

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".example-jquery-fadeOut").click(function(){
    $(".example-jquery-fadeOut-fadeIn-paragraph").fadeOut();
  });
  $(".example-jquery-fadeIn").click(function(){
    $(".example-jquery-fadeOut-fadeIn-paragraph").fadeIn();
  });
});
</script>
<p class="example-jquery-fadeOut-fadeIn-paragraph">jQuery fadeIn() and fadeOut() effects</p>
<button class="example-jquery-fadeOut">fade out</button><br/><br>
<button class="example-jquery-fadeIn">fade in</button>

Output

jQuery fadeToggle()

jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. 

Syntax:

$(selector).fadeToggle();    

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".example-jquery-fadeToggle").click(function(){
    $(".example-jquery-fadeToggle-paragraph").fadeToggle(3000); 
  });
});
</script>
<div class="example-jquery-fadeToggle-paragraph" style="width:100px;height:100px;background-color:blue;"></div><br> 
<button class="example-jquery-fadeToggle">Click here for fade Toggle </button>

Output

jQuery fadeTo()

jQuery fadeTo() method is used to fading to a given opacity.

Syntax:

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

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".example-jquery-fadeTo").click(function(){
     $(".example-jquery-fadeTo-paragraph").fadeTo("slow", 0.3);    
  });
});
</script> 
<div class="example-jquery-fadeTo-paragraph" style="width:100px;height:100px;background-color:blue;"></div><br>
<button class="example-jquery-fadeTo">Click here for fade To</button>

Output