Sequential and simultaneous

There are two types of page transition in jQuery mobile — sequential and simultaneous.

Sequential means the out page is animated and after the animation completes, the in page starts.

Simultaneous means the out page and in page are animated at the same time. Both the original slide transition and our custom slide transition fits into the simultaneous. This is not come from CSS spec. It is something about how jQuery mobile handle the page changing. So we use the following code to tell the jQuery mobile that our custom slide transition is simultaneous type.

$.mobile.transitionHandlers.customslide = $.mobile.transitionHandlers.simultaneous;

We’ve complete a milestone here to create our own page transition. You can check the demo here.

What’s next? We’re going to take a look at “Enhance the transition with blur filter”.