show method in jQuery with examples

Home » JQuery » jQuery Methods » show method in jQuery with examples

show method in jQuery with examples

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Methods

1. show() method is used to show the elements.

2. show() with no duration is equivalent to css property 'display : inline'.

3. show(200) with duration specified becomes animation method.

4. Duration is given in milliseconds, and slow and fast string indicates 600 and 200 milliseconds respectively.

Example 1 :

        <html>
        <head>
        <title>show in jQuery</title>
        <style>
        fieldset
        {
        width:300px;
        margin-left:400px;
        }
        #buttonDiv
        {
        margin-left:400px;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#buttonHide").click(function () {
                    $("#form").hide();
                });

                $("#buttonShowNormal").click(function () {
                    $("#form").show();
                });

                $("#buttonShowAnimation").click(function () {
                    $("#form").show("slow", function () {
                        alert("Show Animated !!");
                    });
                });
            });
        </script>
        </head>
        <body>
        <fieldset id="form">
        <legend>Form</legend>
        <table>
        <tr>
        <td><label>Name:</label></td>
        <td><input type="text" id="txtName"><td>
        </tr>
        <tr>
        <td><label>Age:</label></td>
        <td><input type="text" id="txtAge"><td>
        </tr>
        <tr>
        <td><label>Address:</label></td>
        <td><input type="text" id="txtAddress"><td>
        </tr>
        </table>
        </fieldset>
        <div id="buttonDiv">
        <input type="button" id="buttonHide" value="Hide"/>
        <input type="button" id="buttonShowNormal" value="Show Normal"/>
        <input type="button" id="buttonShowAnimation" value="Show Animation"/>
        </div>
        </body>
        </html>

Demo :

In the above example, we have used show() method. When we click the "ShowNormal" button, it will show the form quickly like changing the display property from none to inline without animation involved.
There is no animation involved, as we have not specified duration. When we click on "ShowAnimation" button, It shows the form with animation effect as duration for show() method is specified.