jQuery Fading Methods, Easy To Learn jQuery Fading Methods

jQuery Fading Methods

We can use the jQuery fading methods to display or hide the HTML elements by gradually increasing or decreasing their opacity.

jQuery has the following fading methods:

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

jQuery fadein()

jQuery fadeIn() method is used to fade in the element.

Syntax

$(selector).fadein();

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

This is the optional speed parameter . It specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

It is also optional callback parameter. It specifies the function to be executed after completes the fadeIn() method with different parameters :

<!DOCTYPE html>
<html>
<head>
<title>jQuery fadein()</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
    });
});
</script>
<style type="text/css">
.button{ padding:6px 15px;}
.circle_1{
width:80px;
height:80px;
display:none;
background-color:#F90;
margin:5px; 
border-radius:100px;
}
.circle_2{
width:80px;
height:80px;
display:none;
background-color:#0099da; 
margin:5px; 
border-radius:100px;
}
.circle_3{
width:80px;
height:80px;
display:none;
background-color:#FF0; 
margin:5px; 
border-radius:100px;
}
</style>
</head>
<body>
 
<button class="button">Click Here!</button>
   <div id="div1" class="circle_1"></div>
   <div id="div2" class="circle_2"></div>
   <div id="div3" class="circle_3"></div>
 
</body>
</html>

Output :

jQuery fadeout()

The jQuery fadeOut() method is used to fade out the element.

Syntax

$(selector).fadeout();

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

This is the optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

It is also optional callback parameter. It specifies the function to be executed after completion of fadeOut() effect.

<!DOCTYPE html>
<html>
<head>
<title>jQuery fadeout()</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeOut();
        $("#div2").fadeOut("slow");
        $("#div3").fadeOut(3000);
    });
});
</script>
 
<style type="text/css">
    .button{ padding:6px 15px;}
</style>
 
</head>
<body>
 
<button class="button">Click Here!</button><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:#F90; border-radius:100px;"></div><br />
<div id="div2" style="width:80px;height:80px;background-color:#0099da; border-radius:100px;"></div><br />
<div id="div3" style="width:80px;height:80px;background-color:#FF0; border-radius:100px;"></div>
 
</body>
</html>

Output :

jQuery fadeToggle()

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the elements are faded in, it will make them faded out and if they are faded out it will make them faded in.

Syntax

$(selector).fadeToggle();

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

This is the optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

It is also optional callback parameter. It specifies the function to be executed after completion of fadeToggle() effect.

<!DOCTYPE html>
<html>
<head>
<title>jQuery fadeToggle()</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
    });
});
</script>
 
<style type="text/css">
    .button{ padding:6px 15px;}
</style>
 
</head>
<body>
 
<button class="button">Click Here!</button><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:#F90; border-radius:100px;"></div><br />
<div id="div2" style="width:80px;height:80px;background-color:#0099da; border-radius:100px;"></div><br />
<div id="div3" style="width:80px;height:80px;background-color:#FF0; border-radius:100px;"></div>
 
</body>
</html>

Output :

jQuery fadeTo()

The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).

Syntax

$(selector).fadeTo();

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

The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).

It is also an optional callback parameter. It specifies the function to be executed after completion of fadeTo() effect.

<!DOCTYPE html>
<html>
<head>
<title>jQuery fadeTo()</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeTo("slow", 0.2);
        $("#div2").fadeTo("slow", 0.5);
        $("#div3").fadeTo("slow", 0.7);
    });
});
</script>
 
<style type="text/css">
    .button{ padding:6px 15px;}
</style>
 
</head>
<body>
 
<button class="button">Click Here!</button><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:#F90; border-radius:100px;"></div><br />
<div id="div2" style="width:80px;height:80px;background-color:#0099da; border-radius:100px;"></div><br />
<div id="div3" style="width:80px;height:80px;background-color:#FF0; border-radius:100px;"></div>
 
</body>
</html>

Output :

jQuery Tutorial