Fade Method in jQuery

Introduction
Today you will learn about the fade methods in jQuery.
jQuery has the following fade methods:

fadeIn()
adeOut()
fadeToggle()
fadeTo()

Browser Support
images.jpg

Now we will discuss the fadeIn method and fadeOut method.
The "fadeIn()" method animates by slowly increasing the opacity of relevant elements. If you specify a higher value like "$ ("#id"). fadeIn(3000);" then the durations are given in milliseconds; higher values indicate slower animations, not faster ones.

The "fadeOut()"method is just the opposite of "fadeIn()"only for opacity. If you specify a higher value then the opacity slowly decreases.

Basic Example:

<!doctype html>
<
html>
<
head>
    <title>FadeIn</title>
 
   
<script src="Jquary.js"></script>
    <script>
        $(document).ready(function () {
            $(
"#but").click(function () {
                $(
"#red1").fadeIn("slow");
                $(
"#blue1").fadeIn(4000);
            });
 
 
            $(
"#but2").click(function () {
                $(
"#red1").fadeOut(4000);
                $(
"#blue1").fadeOut(3500);
            });
        });
   
</script>
    <style>
        #red1 {
           
height: 300px;
           
width: 300px;
           
background: red;
        }
 
       
#blue1 {
           
height: 300px;
           
width: 300px;
           
background: blue;
        }
 
       
.button {
        }
   
</style>
</
head>
<
body style="background: green;">
    <div style="width: 320px; float: left;">
        <div style="width: 300px; height: 300px; float: left;">
            <div id="red1">
            </div>
        </div>
        <input type="button" id="but" value="fadein" />
    </div>
 
   
<div style="width: 320px; float: left;">
        <div style="width: 300px; height: 300px; float: left;">
            <div id="blue1"></div>
        </div>
        <input type="button" id="but2" value="fadeout" />
    </div>
</
body>
</
html>

 First click the "fadeout" button then the "fadeout" button.

Clipb.jpg

It does  the fadeOut.

FAD.jpg

Then it does the fadeIn.

Toggle Method

The "fadeToggle()" method does the same. If however you use toggle then you will write less code and you can do fadein and fadeout by one button. This method is almost used in design.

Basic Example:

<script src="Jquary.js"></script>
<
script>
    $(document).ready(function () {
        $(
"#but").click(function () {
            $(
"#red1").fadeToggle(4000);
            $(
"#blue1").fadeToggle(3500);
        });
    });
</script>

 toggle.jpg

I hope you can solve problems from this code.

Up Next
    Ebook Download
    View all
    Learn
    View all