JQuery: sliding

Published Thu, Aug 13 2009 9:59

In this post, we’ll take a look at the JQuery methods used for sliding animations. We’ve got 3 methods for executing sliding animations:

slideDown: shows all the hidden elements contained in the wrapped set of the JQuery object.
slideUp: hides all visible elements defined in the wrapped set.
slideToggle: toggles the elements between hidden and visible.

The methods expect the traditional speed (you can pass an integer or one of the “magic” strings we’ve met in the past) and (optional) callback function parameters. If you didn’t notice, these methods are really similar to the show/hide/toggle methods we’ve met in a previous post.

The slide methods affect several css properties. Besides changing the height, the latest version of JQuery (1.3 when I wrote this) will also animate the vertical padding and vertical margins of the elements in order to ensure a smoother transition between visible and hidden (notice that element will also be removed from the display at the end of the animation). Here’s a small sample that shows how easy it is to add sliding to an element:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
        p{ 
            border: solid 1px red;
            height: 100px;
            margin:10px;
        }           
    </style>
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
</head>
<body>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<input type="button" value="slide down/up" />
<script type="text/javascript">
    $(function() {
        $("input").click(
            function() { $("p").slideToggle(500); });
    });    
</script>
</body>
</html>

If you run the previous snippet, you’ll notice that clicking the button ends up sliding the p elements of the page (I’ve added a default height to all the paragraphs to make the transition more visible). If you’re interested in hiding the elements at page load, then you can simply set their CSS display property to none.

And that’s it. Keep tuned for more on JQuery.

by luisabreu