when I click with custom animation. ...">
Geek Answers Handbook

Side animation via jQuery

I have several <div> elements and a menu that should "call" these different <div> when I click with custom animation.

This menu is:

  • Normal
  • Remote
  • Instruments
  • registration
  • To come in
  • To donate
  • Contact
  • Terms of Use

Now I need to manage and show different divs, based on which I press the menu button.

I need help in two cases:

  • Creating an animation (see jsfiddle below)
  • Handling transitions between divs is effective without a lot of code rewriting.

Case 1:

When I click on a menu (e.g. Remote), I want the other visible menu to move to the full right side and disappear (I used overflow: hidden for the main div for this), and then connect the corresponding div on the left to enter (remote page div).

So basically, I want slideDown and slideUp to be horizontal.

This is what I have so far: http://jsfiddle.net/Dugi/UtH4m/8/

This is a good example to show what I already have for my site locally. I couldn’t make the right div with LEFT when the menu button is pressed, I just can do it so that I can HIDE separate the ones that stand in the way.

Final question:. How can I use .animate () to make the right div on the left side AFTER the other visible div went right?

Case 2:

As you can see from jsfiddle above, I had to go through all the 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 automate this process and hide all visible divs and show the correct menu button press?

That is all I want to know.

thanks

+4
source share
2 answers

To do this, you can use the complete parameter of the animate function. I let the HTML and CSS change a bit if you don't mind. http://jsfiddle.net/UtH4m/9/

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

+5
source

Hope this is what you want. I changed the layout a bit. I added #container for all pages that are navigating. Here's what it looks like: jsFiddle

+3
source

More articles:


All Articles