slide method in jQuery with examples

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

slide method in jQuery with examples

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Methods

1. Sliding effect in jQuery can be achieved by slideUp(), slideDown(), and slideToggle() methods.
2. SlideDown() method animated the height of the matched element. This causes the lower elements to move down.
3. SlideUp() method also animates the height but causes the lower parts of page to move up.
4. When height becomes 0 the display property is set to none to ensure the animated element does not affect the page.
5. Duration of sliding is specified in milliseconds.
6. Fast and slow corressponds to 200 and 600 milliseconds respectively.
7. Default duration is 400 milliseconds, when duration is omitted.

Example 1 :

        <html>
        <head>
        <title>Slide Effect</title>
        <style>
        #main li
        {
        float: left;
        padding-left: 20px;
        list-style: none;
        }
        .innerList
        {
        display:none;
        }
        .innerList li
        {
        float:none!important;
        margin-left:-60px!important;
        }
        </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 () {
                $("#main li").hover(function () {
                    $(this).find("ul").slideDown("slow");
                }, function () {
                    $(this).find("ul").slideUp("slow");
                });
            });
        </script>
        </head>
        <body>
        <ul id="main">
        <li>Football
        <ul class="innerList">
        <li>Fabregas</li>
        <li>Henry</li>
        <li>Messi</li>
        </ul>
        </li>
        <li>Cricket
        <ul class="innerList">
        <li>Sachin</li>
        <li>Ponting</li>
        <li>Sehwag</li>
        </ul>
        </li>
        <li>Tennis
        <ul class="innerList">
        <li>Federer</li>
        <li>Djokovic</li>
        <li>Nadal</li>
        </ul>
        </li>
        </ul>
        </body>
        </html>

Demo :

In the above examples, we have created a unordered list and using css, we gave it a look of accordion list. On hover of list elements we are showing another unordered list using slideDown method.
On un hovering, the list slides up and and its display property is set to none using slideUp method.

Example 2 :

        <html>
        <head>
        <title>slideToggle</title>
        <style>
        fieldset
        {
        width:300px;
        margin-left:400px;
        display:none;
        }
        #buttonOpen
        {
        margin-left:490px;
        width:100px;
        }
        </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 () {
                $("#buttonOpen").click(function () {
                    $("#form").slideToggle("slow", function () {
                        changeButtonValue();
                    })
                })
            });
            function changeButtonValue() {
                var name = $("#buttonOpen").val();
                if (name == 'Open') {
                    $("#buttonOpen").val('Close');
                }
                else {
                    $("#buttonOpen").val('Open');
                }
            }

        </script>
        </head>
        <body>
        <input type="button" id="buttonOpen" value="Open"/><br>
        <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>
        </body>
        </html>

Demo :

In above example, we have a form and a button. On load form has display property set to none. On click of button, we make form to slide down. Similarly on clicking again it slides up and when its height becomes 0 form's display property is set to none. This is achieved by slideToggle() method. In order to show the transition between slideup and slide down, we are changing value property of button depending on current state of slideToggle().