Slide Elements in Different Directions
Although jQuery has a nice set of slide methods — .slideDown(), .slideUp(), and .slideToggle() — sometimes we may want to slide an element in a different direction. Fortunately, it's pretty easy to do.
Reverse the Slide Direction
With the built-in slide methods, elements are shown by sliding them down and into view. But what if we want to slide something from the bottom up and into view? The trick here is to use some judicious CSS. Let's start with a simple HTML structure:
[html][/html]To get the inner div to slide up, we'll anchor its bottom edge to the bottom of the bottom of the nearest positioned ancestor (in this case, the #slidebottom div):
[css].slide { position: relative; } .slide .inner { position: absolute; left: 0; bottom: 0; }[/css]Other properties such as width, padding, margin, and background-color have been set for these elements, but only the essential properties for modifying the slide behavior are shown above.
Note: I'll be using the term positioned to refer to elements that have the CSS position property set to something other than "static." Both divs in this example are positioned — one absolutely and the other relatively.
Now, we can write the jQuery the same way we would with a traditional slide effect:
[js]$(document).ready(function() { $('#slidebottom button').click(function() { $(this).next().slideToggle(); }); });[/js]Try it out:
Horizontal Slides
Animate Width
We can also slide elements to the left and right. The simplest way is to animate the element's width property.
[js]$(document).ready(function() { $('#slidewidth button').click(function() { $(this).next().animate({width: 'toggle'}); }); });[/js]In this case it's not necessary for the sliding element to be positioned.
While animating the width is fine for what it is, I'm not crazy about how the text wraps as the width decreases. One way to avoid the wrapping is to add a CSS declaration such as white-space: nowrap;, but that would mess up the appearance of an element with a lot of text—one in which we would expect to see text wrapping when it is at full length.
Animate Left
Another way to avoid the text-wrap issue is to animate the element's left property. Here, it's important once again to make sure that the element is positioned. After all, we can't move an element if it's static.
With this animation, we need to calculate how far to move the element. The following code rests on two assumptions: (1) the sliding element has an outerWidth() that is equal to or greater than its parent element's width, and (2) the sliding element is initially set to left: 0;. You may have to adjust your code if either one of these assumptions doesn't hold in your situation.
Lines 5 through 7 use a "ternary" operator that basically says, "If the left css property equals 0, move the element to the left as many pixels as it is wide (including padding and border); if not, move it back to 0."
Also, if we want the element to be hidden when it slides to the left, we need to add overflow: hidden; to its parent element.
Animate Left Margin
Finally, we can achieve the same effect as the left animation by animating the marginLeft property. In this case, we still need overflow: hidden; on the parent element, but the sliding element does not need to be positioned.
For the sake of variety, we're sliding this one to the right.
With a couple little tweaks, these horizontal slides can be used for a horizontal accordion.
Further Resources
- To learn about adding easing effects to your slides, check out Brandon Aaron's Quick Tip: Add Easing to Your Animations.
- To convert any of these slides into a plugin for convenient reuse, see Simple Effects Plugins.
- For a whole bunch of ready-made slides and other effects, take a look at jQuery UI.
