Home > DeveloperSection > Blogs > JQuery Fade In Fade Out

JQuery Fade In Fade Out


JQuery JQuery 
Ratings:
0 Comment(s)
 3090  View(s)
Rate this:

JQuery Fade In Fade Out

In this blog, I’m explaining how to use jquery fade in fade out method in our application.

Fade In Fade Out

Fade In and fade out methods works in 3 different styles:

·         fadeIn(‘slow’) or fadeOut(‘slow’)

·         fadeIn(‘fast’) of fadeout(‘fast’)

·         fadeIn(Timespan) of fadeout(Timespan)

Note:- Timespan is an integer value and represents milliseconds.

                                           

Example

In this example, first create an asp.net web application and div and button, we fade in and fade out the div along with its contents on button click.

Step 1:

First design the web page like this:



<form id="form1" runat="server">

    <div>

        <div style="min-height: 102px; height: 102px;">

            <div id="divFadeInOut" style="width: 113px; height: 102px; background-color: Green;

                border: 1px;">

                This is the example of JQuery Fade In Fade Out(SLOW).

            </div>

        </div>

        <input type="button" name="btnFade" value="Fade Out" id="btnFade" style="width: 81px;

            position: fixed;"/>

    </div>

</form>

Step 2:

Now add a file named “jquery-1.9.0.min.js” to your solution so that you can work on jquery and the below line in the head section of the web page.

<script src="jquery-1.9.0.min.js" type="text/javascript"></script>

Step 3:

Now write a method in the head section of web page like this :

<script language="javascript" type="text/javascript">

        function fadeinorout() {

            if ($('#btnFade').val() == "Fade In") {

                $('#btnFade').val("Fade Out");

                $('#divFadeInOut').fadeIn('slow');

            }

            else {

                $('#btnFade').val("Fade In");

                $('#divFadeInOut').fadeOut('slow');

            }

        }

</script>

btnFade – Id of button

divFadeInOut – Id of div

This method will fade in and fade out the div and also change the text of button on button’s click.

Step 4:

Now call the above method on button click like this:

<input type="button" name="btnFade" value="Fade Out" id="btnFade" style="width: 81px;

            position: fixed;" onclick="fadeinorout();" />

Full Code

Here is the full code with all 3 forms of fadeIn() and fadeOut() methods:

<head runat="server">

    <title>JQUERY FADE IN FADE OUT</title>

    <script src="jquery-1.9.0.min.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">

        function fadeinorout() {

            if ($('#btnFade').val() == "Fade In") {

                $('#btnFade').val("Fade Out");

                $('#divFadeInOut').fadeIn('slow');

            }

            else {

               $('#btnFade').val("Fade In");

                $('#divFadeInOut').fadeOut('slow');

            }

        }

        function fadeinoroutFAST() {

            if ($('#btnFadeFast').val() == "Fade In") {

                $('#btnFadeFast').val("Fade Out");

                $('#divFadeInOrOutFAST').fadeIn('fast');

            }

          else {

                $('#btnFadeFast').val("Fade In");

                $('#divFadeInOrOutFAST').fadeOut('fast');

            }

        }

        function fadeinoroutTimespan() {

            if ($('#btnFadeTimespan').val() == "Fade In") {

                $('#btnFadeTimespan').val("Fade Out");

                $('#divFadeInOrOutTimespan').fadeIn(4000);

            }

           else {

                $('#btnFadeTimespan').val("Fade In");

                $('#divFadeInOrOutTimespan').fadeOut(4000);

            }

        }

 </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <div style="min-height: 102px; height: 102px;">

            <div id="divFadeInOut" style="width: 113px; height: 102px; background-color: Green;

                border: 1px;">

                This is the example of JQuery Fade In Fade Out(SLOW).

            </div>

        </div>

        <input type="button" name="btnFade" value="Fade Out" id="btnFade" style="width: 81px;

            position: fixed;" onclick="fadeinorout();" />

    </div>

    <div>

        <div style="min-height: 102px; height: 102px;margin-top:110px;">

            <div id="divFadeInOrOutFAST" style="width: 113px; height: 102px; background-color: Green;

                border: 1px;">

                This is the example of JQuery Fade In Fade Out(FAST).

            </div>

        </div>

        <input type="button" name="btnFadeFast" value="Fade Out" id="btnFadeFast" style="width: 81px;

            position: fixed;" onclick="fadeinoroutFAST();" />

    </div>

 

    <div>

        <div style="min-height: 102px; height: 102px;margin-top:120px;">

            <div id="divFadeInOrOutTimespan" style="width: 113px; height: 102px; background-color: Green;

                border: 1px;">

                This is the example of JQuery Fade In Fade Out(TIMESPAN).

            </div>

        </div>

        <input type="button" name="btnFadeTimespan" value="Fade Out" id="btnFadeTimespan" style="width: 81px;

            position: fixed;" onclick="fadeinoroutTimespan();" />

    </div>

    </form>

</body>


Don't want to miss updates? Please click the below button!

Follow MindStick