blog

Home / DeveloperSection / Blogs / JQuery Fade In Fade Out

JQuery Fade In Fade Out

Sumit Kesarwani6447 19-Dec-2013

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:


JQuery Fade In Fade Out


<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:

<headrunat="server">
    <title>JQUERY FADE IN FADE OUT</title>
    <scriptsrc="jquery-1.9.0.min.js"type="text/javascript"></script>
    <scriptlanguage="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>
    <formid="form1"runat="server">
    <div>
        <divstyle="min-height: 102px; height: 102px;">
            <divid="divFadeInOut"style="width: 113px; height: 102px; background-color: Green;
                border: 1px;">
                This is the example of JQuery Fade In Fade Out(SLOW).
            </div>
        </div>
        <inputtype="button"name="btnFade"value="Fade Out"id="btnFade"style="width: 81px;
            position: fixed;"onclick="fadeinorout();"/>
    </div>
    <div>
        <divstyle="min-height: 102px; height: 102px;margin-top:110px;">
            <divid="divFadeInOrOutFAST"style="width: 113px; height: 102px; background-color: Green;
                border: 1px;">
                This is the example of JQuery Fade In Fade Out(FAST).
            </div>
        </div>
        <inputtype="button"name="btnFadeFast"value="Fade Out"id="btnFadeFast"style="width: 81px;
            position: fixed;"onclick="fadeinoroutFAST();"/>
    </div>
 
    <div>
        <divstyle="min-height: 102px; height: 102px;margin-top:120px;">
            <divid="divFadeInOrOutTimespan"style="width: 113px; height: 102px; background-color: Green;
                border: 1px;">
                This is the example of JQuery Fade In Fade Out(TIMESPAN).
            </div>
        </div>
        <inputtype="button"name="btnFadeTimespan"value="Fade Out"id="btnFadeTimespan"style="width: 81px;
            position: fixed;"onclick="fadeinoroutTimespan();"/>
    </div>
    </form>
</body>


Updated 18-Sep-2014

Leave Comment

Comments

Liked By