Site Loader
Get a Quote

Fade-in Fade-out Effects using Jquery

Fade-in Fade-out Effects using Jquery:- Hi Readers, In this tutorial, we are going to learn about Fade in Fade out Effects in Jquery.

jQuery fadeIn() and fadeOut() methods are used to display or hide the HTML elements by increasing or decreasing their opacity level gradually. 

The fadeOut() method changes the opacity level of selected elements, from visible to hidden 

The fadeIn() method changes the opacity level of selected elements, from hidden to visible.

Syntax:

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

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

Note:

Like other Effects in JQuery using various pre-defined methods, you can optionally set the duration or speed parameter for the fadeIn() and fadeOut() methods to control the time of fading animation effect. The Speed Parameter can be set to either “slow” or “fast” or in “milliseconds”(as high value is set then animation effect is as slow).

Examples:

<!DOCTYPE html>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

//For FadeOut Effects

$(document).ready(function(){

    $(".btn1").click(function(){

        $("#div1").fadeOut();

        $("#div2").fadeOut("slow");

        $("#div3").fadeOut(3000);

        $("#test").fadeOut(3000);

    });

});

//For FadeIn Effects

$(document).ready(function(){

    $(".btn2").click(function(){

        $("#div1").fadeIn();

        $("#div2").fadeIn("slow");

        $("#div3").fadeIn(3000);

        $("#test").fadeIn(3000);

    });

});
</script>
</head>

<body>
<p id = "test">Example of FadeOut Effects</p>
<button class="btn1">Click to fade out boxes</button><br><br>
<button class="btn2">Click to fade In boxes</button><br><br>

//first Div
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
//second Div
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
//Third Div
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

FadeIn Screenshots

Fade-in Fade-out Effects using Jquery

FadeOut Screenshots

Fade-in Fade-out Effects using Jquery


I hope you would like this tutorial on how to add fading effects on div element using Jquery i.e., Fade-in Fade-out Effects using Jquery!

Post Author: TechieFlair