The following page transition effects are provided in jQuery Mobile:
- slide (default)
- slideup
- slidedown
- pop
- fade
- flip
To apply the page transition effects,
data-transition="slideup".
Test on Android device: I test it on Firefox and Opera Mobile, both have no effect. You can test it using Android default build-in browser. You can check the various effect by clicking the named links. Also you can try BACK button to check how reversed transition applied.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile: Page Transition</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Page Transition</h1>
</div>
<div data-role="content">
<p>Hello ALL</p>
<p>jQuery Mobile: demo of Page Transition</p><br/><br/>
<a href="#page_slide" data-transition="slide">slide</a><br/>
<a href="#page_slideup" data-transition="slideup">slideup</a><br/>
<a href="#page_slidedown" data-transition="slidedown">slidedown</a><br/>
<a href="#page_pop" data-transition="pop">pop</a><br/>
<a href="#page_fade" data-transition="fade">fade</a><br/>
<a href="#page_flip" data-transition="flip">flip</a><br/>
</div>
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>
<div data-role="page" id="page_slide">
<div data-role="header">
<h1>mobile-web-app</h1>
</div>
<div data-role="content">
<p>This page is slide in</p>
<a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>
<div data-role="page" id="page_slideup">
<div data-role="header">
<h1>mobile-web-app</h1>
</div>
<div data-role="content">
<p>This page is slideup in</p>
<a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>
<div data-role="page" id="page_slidedown">
<div data-role="header">
<h1>mobile-web-app</h1>
</div>
<div data-role="content">
<p>This page is slidedown in</p>
<a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>
<div data-role="page" id="page_pop">
<div data-role="header">
<h1>mobile-web-app</h1>
</div>
<div data-role="content">
<p>This page is pop in</p>
<a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>
<div data-role="page" id="page_fade">
<div data-role="header">
<h1>mobile-web-app</h1>
</div>
<div data-role="content">
<p>This page is fade in</p>
<a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>
<div data-role="page" id="page_flip">
<div data-role="header">
<h1>mobile-web-app</h1>
</div>
<div data-role="content">
<p>This page is flip in</p>
<a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>
</body>
</html>
