jQuery Effects - Fading

You may use jQuery to fade items in and out of view.

You can also search for these topics, jquery fading effects for websites, images appears, list out all fading effects using jquery, jquery menu fading effects, define the background fading effects in jquery.

jQuery Fading Methods

You may use jQuery to fade an element's visibility in and out.

There are several fading methods available in jQuery :

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()
You can also search for these topics, declare and hovring the jquery fading method example, jquery hide the fade methods, execute the slideshow, fading the message box and popup message, how to stop fading in jquery, fade left and right in jquery, check the visibility hidden, background color and text color, background image to another, border color.

jQuery fadeIn() and fadeOut() Methods

The fadeIn() method is used to display a hidden element to visible with fading animation.

The fadeOut() method is used to hide or remove a visible element with fading animation.

Syntax :-

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

The speed and callback parameters are optional.

The speed parameter is used to control the duration of the animation effect. Possible values are "Slow", "Fast", or milliseconds.

The callback parameter is a function that will be run once the fading is finished.

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b1").click(function () {
            $("#div1").fadeIn();
            $("#div2").fadeIn("slow");
            $("#div3").fadeIn(3000);
        });

        $("#b2").click(function () {
            $("#div1").fadeOut();
            $("#div2").fadeOut("slow");
            $("#div3").fadeOut(3000);
        });
    });
</script>
</head>
<body>

<button id="b1">Fade IN Boxes</button>
<button id="b2">Fade OUT Boxes</button><br /><br />

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

</body>
</html>

Output :-




You can also search for these topics, direction used in jquery fadein method, jquery fadein method multiple elements, how to add new element with jquery fadein method, visibility of object, parameters available in jQuery fadeIn(), syntax, example, add multiple elements in fadeout method jquery, jquery fadeout method background color, callback, modify the opacity using jquery fadein or fadeout method, parameters for jquery fadeout() method, fadeout syntax, fadeout example.

jQuery fadeToggle() Method

The function jQuery fadeToggle() toggles between the methods fadeIn() and fadeOut().

If the components are removed, they will be blurred in using fadeToggle().

fadeToggle() will fade out items that have been faded in.

Syntax :-

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

Example :- The following code illustrates the fadeToggle() function with various parameters :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b5").click(function () {
            $("#div4").fadeToggle();
            $("#div5").fadeToggle("slow");
            $("#div6").fadeToggle(3000);
            $("#div20").fadeToggle(2000);
        });
    });
</script>
</head>
<body>

<button id="b5">Fade Toggle - IN/OUT Boxes</button><br /><br />

<div id="div20">This is a div text</div><br />
<div id="div4" style="width:80px;height:80px;display:none;background-color:red;"></div>
<div id="div5" style="width:80px;height:80px;display:none;background-color:green;"></div>
<div id="div6" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

Output :-



This is a div text


You can also search for these topics, fadeToggle() method not working in jquery, delay the jquery fadeToggle() method, modify the opacity of fadeToggle() method, parameter, syntax, example for fadetoggle() function.

jQuery fadeTo() Method

The jQuery fadeTo() function enables fading to a specified opacity (value between 0 and 1).

Syntax :-

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

The speed and opacity parameters are mandatory.

The callback parameter is optional.

The effect's duration is determined by the speed parameter. "Slow", "Fast", or milliseconds are all possible values.

The fadeTo() method's opacity argument indicates fading to a certain opacity level (value between 0 and 1).

Example :- The following example shows the function fadeTo() with various parameters :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("#div1").fadeTo("slow", 0.15);
            $("#div2").fadeTo("slow", 0.4);
            $("#div3").fadeTo("slow", 0.7);
        });
    });
</script>
</head>
<body>

<p>Demonstrate fadeTo() with different parameters.</p>

<script>
    $(document).ready(function () {
        $("#b7").click(function () {
            $("#div10").fadeTo("slow", 0.15);
            $("#div11").fadeTo("slow", 0.4);
            $("#div12").fadeTo("slow", 0.7);
        });
    });
</script>

<button id="b7">Click to Fade Boxes</button><br /><br />

<div id="div10" style="width:80px;height:80px;background-color:red;"></div><br />
<div id="div11" style="width:80px;height:80px;background-color:green;"></div><br />
<div id="div12" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

Output :-






You can also search for these topics, jQuery fadeTo() method, how to add opacity in jQuery fadeTo(), jQuery fadeTo() method syntax and example, parameters, jQuery fadeTo() delay.