Animate sideways via jQuery

Question

I have a few <div> elements and a menu which is supposed to "call" these different <div>s on click with a custom animation.

These are the menus:

• Normal
• Remote
• Tools
• Register
• Log in
• Donate
• Contact
• Terms of use

Now I need to control and show different divs based on which menu entry I click.

I need help in two occasions:

1. Creating the animation (see the jsfiddle below)
2. Handling the transitions between the divs efficiently without lots of code rewriting.

Occasion 1:

When I click on a menu (Remote for example) I want the other visible menu to move itself to its complete right side and disappear (I've used overflow: hidden on the main div for that) and then from the left side the proper div to come in (remote-page div).

So basically, I'm wanting to make the slideDown and slideUp horizontal.

This is what I've got so far: http://jsfiddle.net/Dugi/UtH4m/8/

This is a good example to show what I've got already for my website locally. I failed to make the proper div come in from the LEFT side when a menu button was clicked, I just could make it so I can HIDE the divs that are standing on the way.

Final question: So how do I use .animate() to make the proper div come in from the left side AFTER the other visible div went to the right?

Occasion 2:

As you can see from the jsfiddle above, I had to go through each existing <div> and hide them:

$('#remote').click(function()
{
      $('#normal-page').animate({marginLeft: '100%'}, 'fast'); // here
      $('#tools-page').animate({marginLeft: '100%'}, 'fast');  // here   
});

Final question: Is there a way to automatize this process and hide all visible divs and show the proper one when a menu button is clicked?

This is all I want to know.

Thanks

Answer 1

You can use complete parameter of the animate function to achieve that. I took the liberty of changing HTML and CSS a bit if you do not mind. http://jsfiddle.net/UtH4m/9/

Final version: http://jsfiddle.net/UtH4m/13/

Answer 2

I hope this is what you want. I changed you markup a little bit. I added a #container for all the pages that is moved around. This is how it would look like: jsFiddle