Question

I have the following code in HTML/CSS: http://jsfiddle.net/XmRNh/

As you can see, there is an “About” container, with three “Slides” inside.
The 1st slide is always open. The initial state of the 2nd and 3rd slide is that they are hidden off-screen.

I would like to use jQuery to “slide” the second and third slide into place when the appropriate button is clicked, and then slide it off screen when the appropriate close button is clicked.

I can see in the jQuery documentation how to slideUp and slideDown, but not how to slide left or slide right. Can anyone help me accomplish this?

Thanks
Zach

EDIT: Is it possible to have the first slide off-screen/hidden when the page loads, and have it slide in from the left as soon as the page loads?

Answer 1

Check out http://docs.jquery.com/UI/Effects/Slide – using the show / hide methods you can pass more parameters such as the direction. E.g.

$('#about-slide-2').show("slide", { direction: "left" }, 1000);

To show the first panel upon loading you would set it’s display style to none in the html like this

style='display:none'

Then use this javascript

$(function() {
  $('#about-slide-1').show("slide", { direction: "left" }, 1000);
});

Please note that these effects are included in jQueryUI, not in standard jQuery, but I think you can download a custom build of it that just includes the effects you need.