scriptygoddess

(This post has been almost completely re-written. Usually I don't that – but I thought it would be more confusing to have all the changes, strikeouts, etc.)

For a project I'm going to be working on, I needed to create a navigation piece that had different panes scrolling/sliding in from the right depending on what item you clicked. I've seen lots of options for vertical accordions. Not as many, but a few, options for horizontal accordions. My situation was unique in that the click was not near or part of the scrolling panes. And it should disappear completely out of view if not the current pane so that if clicked again, it would again animate in. But if already in view – I wanted it to stay until the new pane coming in covered it completely.

Went through a few versions of this, and finally I have something I'm satisfied with. Here's the demo.

View source on that page to see the full html and jquery code. Now I'll walk you through what my logic was…

var lastpane;
var href;
var zcount = 2;
var inprogress = false;

That's just calling out some variables we'll be using in various iterations. "href" will be used to hold a reference to the current element/pane. "zcount" will make sure the current pane always has the highest z-index. "inprogress" will keep track of whether there is currently a pane being animated or not and will hold the other clicks/animations until the current pane animation is complete

$('a').click(function(){

Obviously, if this gets used in something other than a proof of concept, you'll probably have to be more specific about WHICH 'a' – ie – give the links you want to use for this a style like class="paneslider" and then change that to $('a.paneslider')… etc. In any case, the above just says, run the following whenever a link is clicked.

if (!inprogress && $(this).attr('title') != lastpane) {

Here I'm checking to make sure that an animation isn't already in progress, and the currently clicked link does not match the pane currently in view. (Which would have been defined as "lastpane"

inprogress = true;
zcount = zcount+1;

Set in progress to true right away so that we don't have conflicting animations. And add 1 to zcount (z-index), which will make the current pane appear above any other that is visible.

$(lastpane).css("z-index","1");

Give the last element pane shown (defined as "lastpane") a z-index of 1 to make sure it appears below the pane we want to have move across the screen.

var href = $(this).attr('href');

Now we'll redefine href as the current pane we want to animate. (This, by the way is set in the html – in the "a" tag using the "title" attribute).

$(href).css("left","800px");
$(href).css("z-index",zcount);

Make sure that the current pane is starting out completely out of view, and then giving it the highest z-index.

$(href).animate({"left": "0"}, 2000, function() {

Now we start our animation. Move it across to absolute position of 0 in 2000 milliseconds. As well we use a callback function to do the following after the pane finished moving.

$(lastpane).css("left","800px");
lastpane = href;
inprogress = false;

We move the pane that is now hidden under the current pane back to the "starting" position – and then we redefine "lastpane" with the pane that is now currently visible. And now that everything else is done, "inprogress" gets set back to false so we're open to run another pane across.

Then the rest of the code is all closing brackets etc.

Just for fun, I have another version of the sliding pane thing using the "easing plugin". Here's the demo using a bounce as it comes in.