Question

I just started learning Jquery and am making an div sliding menu, this is what I have so far.

http://jsfiddle.net/HfdXY/494/

I’m not sure i’m doing this correct, so any suggestions about how I can improve this code would be appreciated.

but right now the problem is when I click A then B, how can I make it so that menu from B transitions from B to A, and not below it like it currently is?

Answer 1

This issue you have with your menu is that the animations are happening at the same time, you need to make sure each animation is happening separately or independently of each other.

To do this you can add your animations into their own functions and call them when needed.

function animateB(){
  $("#B").animate({left: "0px"}, 1000);
}

or have a look at .delay() to see how you can add a delay after your animation before the next one occurs.

Also have a look at this answer where there are some other suggestions that may help.