On a recent project I was working on, the client had a web-site structure in mind where the user would navigate using a page swipe (on touch-based devices) and the pages would transition using a slide transition effect. It was pretty clear that jQuery Mobile already offered a lot of the functionality that we were trying to accomplish…both swipe handling (which isn’t discussed here) and sliding page transitions.
As usually happens when finding a “perfect” technology to fit into a project, the implementation details didn’t quite fall into line “perfectly”. The primary issue was that, while the page transitions should slide from page to page, depending on the context, not everything on each page should transition. For example, transitioning between some pages might require the background to slide with the transition while others might require that the background stay static. The solutions for these different sliding approaches weren’t always completely intuitive.
I’m going to describe each the different combinations of transitions that we needed to accommodate and then provide details on how to achieve each one. Part I will cover the initial base source, how to massage the code to accommodate jQuery Mobile, and how to do a slide transition between pages.