jQuery Fading Effects Example Tutorial

In this tutorial, we are going work with the JQuery Fading Effects. In the previous tutorials, we have discussed about JQuery Hide and Show Effects. As part of the JQuery Fading, we have four effects.

jQuery Fading Effects :

Here is the complete examples on JQuery Fading:

JQuery fadeIn
JQuery fadeout
JQuery fadeTo
JQuery fadeToggle

JQuery fadeIn :

JQuery fadein() is method provide by the JQuery API. It is used to make the selected element to fade in.

$(selector).fadeIn();
OR
$(selector).fadeIn(speed, [callback]);

The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Callback represents the execution of function after animation completes. It executes only once for each element on a web page.

JQuery fadeIn() Example :

[html]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery fadeIn Demo Example</title>
<style>
span {
    color: blue;
    cursor: pointer;
}
div {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
}
#one {
    background: orange;
}
#two {
    background: white;
}
#three {
    background: green;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<span>My National Flag colors</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

<script>
$( document.body ).click(function() {
$( "div:hidden:first" ).fadeIn("slow");
});
</script>

</body>
</html>

[/html]

JQuery fadeOut :

JQuery fadeOut() is method provide by the JQuery API. It is used to make the selected element to fade out.

$(selector).fadeOut()
OR
$(selector).fadeOut(speed, [callback]);

JQuery fadeOut Example :

[html]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery fadeOut demo Example</title>
<style>
p {
    font-size: 20px;
    cursor: pointer;
    color:blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>
Click Me
</p>

<script>
$( "p" ).click(function() {
$( "p" ).fadeOut( "slow" );
});
</script>

</body>
</html>

[/html]

JQuery fadeTo :

All matched elements are fades from darkness by using the fadeTo() method in effects. That means, all elements are matched with the selector are faded gradually according to the opacity and speed parameters.

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

The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Opacity have a number between 0 to 1. It denotes the target value of opacity. Callback represents the execution of function after animation completes.

JQuery fadeToggle :

fadeToggle() is a method of JQuery, which toggles the element between the fadeIn() and fadeOut() effects. Initially the element is faded in, then the element will be faded out and vice versa.

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

The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Callback represents the execution of function after animation completes.

JQuery fadeToggle Example :

[html]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery fadeToggle demo Example</title>
<style type="text/css">
p {
font-size: 20px;
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

   <button>FadeToggle</button>
   <button>FadeToggle Callback</button>
   <p>FadeToggle</p>
   <p>FadeToggle Callback</p>
   <div id="log"></div>

Happy Learning 🙂