jQuery UI, slide out one Div, slide in Next
===

I have a layout at the moment with two main divs, both have to be full width and height, but obviously you can only see one at a time.

I'd like a nice transition when swapping between the two, as opposed to a simple fade/show.

I've tried to make it so one div slides out at the same time as the other Div sliding in, but due to positioning and layout, one div is forced under the next.

Images displaying issue:
![enter image description here][1]

![enter image description here][2]


Here's a fiddle displaying the issue:
http://jsfiddle.net/bazzlad/spbyk/1/


  [1]: http://i.stack.imgur.com/zK04N.jpg
  [2]: http://i.stack.imgur.com/6TKcF.jpg