jQuery Effects Using Fade Methods

This article explains how to use jQuery fading methods. The fade methods define visibility of content in UI, in other words how  the web page is hidden/shown. To use the fade methods of jQuery I need a jQuery library in my project so I directly use the Google AJAX Libraries content delivery network to serve jQuery from Google. Doing so has several advantages over hosting jQuery on our server, decreased latency, increased parallelism, and better caching. We add the script to our project.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

You can also use other versions of jQuery and can get a link for Google Hosted Libraries.

We create a web Form to implement jQuery fade methods for the web form with 3 panels (rendered in a div) so the web page design is such that it will be used for all methods.

   <asp:Button ID="btnEffect" runat="server" Text="FadeIn Effect" /><br />
    <asp:Panel ID="panelPersonalInfo" runat="server" >
        <fieldset title ="Personal" style="width:380px;padding:2px;background-color:Orange;Color:White">
            Name : <asp:TextBox ID="txtName" runat="server"></asp:TextBox><br /><br />
            Age  : <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
        </fieldset>
    </asp:Panel> 
    <asp:Panel ID="panelAddressInfo" runat="server">
        <fieldset title ="Address"  style="width:380px;padding:2px;background-color:Blue;Color:White">
            City : <asp:DropDownList ID="ddlCity" runat="server">
                <asp:ListItem Value="1" Text="Jaipur"></asp:ListItem>
                <asp:ListItem Value="2" Text="Udaipur"></asp:ListItem>
                <asp:ListItem Value="3" Text="Jaisalmer"></asp:ListItem>
            </asp:DropDownList><br /><br />
            Zip  : <asp:TextBox ID="txtZip" runat="server"></asp:TextBox>
        </fieldset>
    </asp:Panel> 
    <asp:Panel ID="panelLoginInfo" runat="server" >
        <fieldset title ="Login Information" style="width:380px;padding:2px;background-color:Green;Color:White">
            eMail : <asp:TextBox ID="txtMail" runat="server"></asp:TextBox><br /><br />
            Password  : <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
        </fieldset>
    </asp:Panel>

The common design is:

Our UI design is ready so now to implement the fade methods. There are four types of jQuery Fade methods:

1. fadeIn()

2. fadeOut()

3. fadeToggle()

4. fadeTo()

Let's see one by one

1. fadeIn() Method 

The jQuery fadeIn() method displays a hidden element by fading it in. 

<script type="text/javascript">
        $(document).ready(function ()
        {
            $("#btnEffect").click(function ()
            {
                $("#panelPersonalInfo").fadeIn();
                $("#panelAddressInfo").fadeIn("slow");
                $("#panelLoginInfo").fadeIn(4000); //millisecond
                return false;
            });
        });
    </script>

2. fadeOut() Method 

The jQuery fadeOut() method fades out a visible element and hides it.

<script type="text/javascript">
        $(document).ready(function ()
        {
            $("#btnEffect").click(function ()
            {
                $("#panelPersonalInfo").fadeOut();
                $("#panelAddressInfo").fadeOut("slow");
                $("#panelLoginInfo").fadeOut(4000); //millisecond
                return false;
            });
        });
    </script>

3. fadeToggle() Method 

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the page's elements are faded out then fadeToggle() will fade them in and if the elements are faded in then fadeToggle() will fade them out. 

<script type="text/javascript">
        $(document).ready(function ()
        {
            $("#btnEffect").click(function ()
            {
                $("#panelPersonalInfo").fadeToggle();
                $("#panelAddressInfo").fadeToggle("slow");
                $("#panelLoginInfo").fadeToggle(4000); //millisecond
                return false;
            });
        });
    </script>

4. fadeTo() Method 

The jQuery fadeTo() method allows fading with an opacity value. This value range is 0 to 1. It can show and hide using the opacity value. The opacity value 0 means hide content of the block but leave it on the place on the page and 1 means display without any fade. 

<script type="text/javascript">
        $(document).ready(function ()
        {
            $("#btnEffect").click(function ()
            {
                $("#panelPersonalInfo").fadeTo("fast",.25);
                $("#panelAddressInfo").fadeTo("slow",.5);
                $("#panelLoginInfo").fadeTo(4000,.8); //millisecond
                return false;
            });
        });
    </script> 

Conclusion

This article explains four fade method on button click. You can download all four method examples from the zip folder (JQueryFeddingEffect.zip) where each method has a separate example. So download it and be familiar with the fade methods in jQuery.

Reference:

W3Schools.com  http://www.w3schools.com/jquery/jquery_fade.asp