jQuery Fade Effect


jQuery helps us to fade HTML elements in or out as per the requirement of the design.

Following fade methods help us do that:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() Method


JQuery fadeIn() function is used to Fade In or show a hidden element in HTML.

Syntax :

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

The speed parameter is completely optional and is used to specify the duration of the effect and it can take values like "slow", "fast", or milliseconds.

Callback parameter is also optional and is executed after the fading completes.


For Example:


<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#first-div{
  width: 80px;
  height: 80px;
  display: none;
  background-color: black;
  border-radius: 50%;
}
#second-div{
  width: 80px;
  height: 80px;
  display: none;
  background-color: purple;
  border-radius: 50%;
}
</style>
</head>
<body>

<button>Click to fade in circles</button>
<div id="first-div"></div>
<div id="second-div"></div>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#first-div").fadeIn();
    $("#second-div").fadeIn(3000);
  });
});
</script>
</body>
</html>
Live Demo!


jQuery fadeOut() Method


jQuery fadeOut() function is used to fade out(hide) an element in HTML.

Syntax :

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

Speed is an optional parameter used for controlling the duration of the effect. Callback is also an optional parameter used after the fading out is completed.


For Example:


<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
span{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-block;
}
#span1{
    background-color: black;
}
#span2{
    background-color: purple;
}
#span3{
    background-color: green;
}
</style>
</head>
<body>

<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out circles</button><br><br>
<span id="span1"></span>
<span id="span2"></span>
<span id="span3"></span>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#span1").fadeOut();
    $("#span2").fadeOut("slow");
    $("#span3").fadeOut(3000);
  });
});
</script>

</body>
</html>
Live Demo!


jQuery fadeToggle() Method


jQuery fadeToggle() function is used to toggle between fadeIn() and fadeout()

Syntax :

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

What it means is that if the elements are faded out, fadeToggle() will fade them in and if the elements are faded in, fadeToggle() will fade them out.


For Example:


<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
span{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-block;
}
#span1{
    background-color: black;
}
#span2{
    background-color: purple;
}
</style>
</head>
<body>

<button>Click to fade in/out circles</button><br>
<span id="span1"></span>
<span id="span2"></span>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#span1").fadeToggle();
    $("#span2").fadeToggle(3000);
  });
});
</script>

</body>
</html>
Live Demo!


jQuery fadeTo() Method


jQuery fadeTo() function has a required field named opacity which allows fading of an element to a given opacity(between 0 and 1).

Syntax :

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

The optional parameters speed and callback have the same work as in other methods.


For Example:


<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div{
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
#div1{
    background-color: black;
}
#div2{
    background-color: purple;
}
</style>
</head>
<body>

<button>Click to fade circles</button>
<div id="div1"></div>
<div id="div2"></div>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow", 0.1);
    $("#div2").fadeTo("slow", 0.5);
  });
});
</script>

</body>
</html>
Live Demo!