Page transitions from https://www.dropbox.com/guide using JQuery

Question

I'm currently trying to recreate the page transitions (slide left/right) from https://www.dropbox.com/guide using JQuery. I'm afraid that I'm overthinking the process that goes into making the transitions. What I'm thinking about doing is this:

Have 3 divs for both the left and right side: 1 for "back" content, 1 for the current displayed content, and 1 for "next" content laid out similar to

                [           screen   width               ]
[back div left] [displayed div left] [next div left      ]
                [back div right    ] [displayed div right] [next div right]

with "back div right behind "displayed div left" and "next div left" behind "displayed div right"

Then, suppose the user presses "next". The page:

1. Sends an AJAX request to load the next page content onto "next div left" and "next div right" separately
2. Animate both divs so that the on screen displayed div is "next div left" and "next div right" so the layout looks like

                                     [ screen width                       ]
[back div left] [displayed div left] [next div left      ]
                [back div right    ] [displayed div right] [next div right]

"next div left" and "next div right" are displayed

3. Remove "back div left" and "back div right"
4. Rename the divs such that:
   • "displayed div left" -> "back div left"
   • "next div left" -> "displayed div left"
   • "displayed div right" -> "back div right"
   • "next div right" -> "displayed div right"

                [ screen   width                         ]
[back div left] [displayed div left]
                [back div right    ] [displayed div right]

5. Append new divs (same dimensions) to both "displayed div left" and "displayed div right" as the new "next div left" and "net div right" so that the layout is the same as it was before the page load

                [           screen   width               ]
[back div left] [displayed div left] [next div left      ]
                [back div right    ] [displayed div right] [next div right]

---

After fiddling around with it for a bit, I have a version that transitions up/down instead of left/right as a test that I've uploaded here.

Questions:

1. Am I on the right track or am I overthinking it?
2. Is there an easier way to do the transition instead of using 2 placeholder divs on either side of the displayed content?

Thanks in advance for your help!