Page Transitions

Code

<!-- Available transitions -->
<a href="#page2" data-transition="slide">Slide</a>
<a href="#page2" data-transition="slideup">Slide Up</a>
<a href="#page2" data-transition="slidedown">Slide Down</a>
<a href="#page2" data-transition="pop">Pop</a>
<a href="#page2" data-transition="fade">Fade</a>
<a href="#page2" data-transition="flip">Flip</a>
<a href="#page2" data-transition="turn">Turn</a>
<a href="#page2" data-transition="flow">Flow</a>

<!-- Reverse direction (e.g. back button) -->
<a href="#home" data-transition="slide" data-direction="reverse">Back</a>

<!-- Set defaults globally -->
<script>
$(document).on("mobileinit", function() {
  $.mobile.defaultPageTransition = "slide";
  $.mobile.defaultDialogTransition = "pop";
  $.mobile.maxTransitionWidth = false;
});
</script>

Explanation

Apply named transitions via data-transition on any link; data-direction=reverse plays them backwards for back navigation. The mobileinit hook (bound before the jQuery Mobile script loads) sets global defaults so every page change uses the same transition. Transitions are GPU-accelerated for smooth mobile performance.

More jQuery Mobile Snippets