<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<title>Document</title>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>welcome to my homepage</h1>
</div>
<div data-role="content">
<p>click the link will see the fade effect: <a href="#pagetwo" data-transition="fade">go to the pagetwo</a><br/></p>
<p>click the link will see the flip effect: <a href="#pagetwo" data-transition="flip">go to the pagetwo</a><br/></p>
<p>click the link will see the flow effect: <a href="#pagetwo" data-transition="flow">go to the pagetwo</a><br/></p>
<p>click the link will see the pop effect: <a href="#pagetwo" data-transition="pop">go to the pagetwo</a><br/></p>
<p>click the link will see the slide effect: <a href="#pagetwo" data-transition="slide">go to the pagetwo</a><br/></p>
<p>click the link will see the slidefade effect: <a href="#pagetwo" data-transition="slidefade">go to the pagetwo</a><br/></p>
<p>click the link will see the slideup effect: <a href="#pagetwo" data-transition="slideup">go to the pagetwo</a><br/></p>
<p>click the link will see the slidedown effect: <a href="#pagetwo" data-transition="slidedown">go to the pagetwo</a><br/></p>
<p>click the link will see the turn effect: <a href="#pagetwo" data-transition="turn">go to the pagetwo</a><br/></p>
<p>click the link will see the none effect: <a href="#pagetwo" data-transition="none">go to the pagetwo</a><br/></p>
</div>
<div data-role="footer">
<h1>footer content</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1> welcome to my pagetwo</h1>
</div>
<div data-role="content">
<p> click the link will go to the pageone <b>note:</b>: <strong>fade</strong> default effect <a href="#pageone">go to the pageone</a></p>
<p> click the link will go to the pageone <b>note:</b>: <strong>flip</strong> default effect <a href="#pageone" data-transition="flip">go to the pageone</a></p>
<p> click the link will go to the pageone <b>note:</b>: <strong>flow</strong> default effect <a href="#pageone" data-transition="flow">go to the pageone</a></p>
<p> click the link will go to the pageone <b>note:</b>: <strong>pop</strong> default effect <a href="#pageone" data-transition="pop">go to the pageone</a></p>
<p> click the link will go to the pageone <b>note:</b>: <strong>slide</strong> default effect <a href="#pageone" data-transition="slide" data-direction="reverse">go to the pageone</a></p>
<p> click the link will go to the pageone <b>note:</b>: <strong>slidefade</strong> default effect <a href="#pageone" data-transition="slidefade">go to the pageone</a></p>
<p> click the link will go to the pageone <b>note:</b>: <strong>slide</strong> default effect <a href="#pageone" data-transition="slideup">go to the pageone</a></p>
<p> click the link will go to the pageone <b>note:</b>: <strong>slidedown</strong> default effect <a href="#pageone" data-transition="slidedown">go to the pageone</a></p>
<p> click the link will go to the pageone <b>note:</b>: <strong>turn</strong> default effect <a href="#pageone" data-transition="turn">go to the pageone</a></p>
<p> click the link will go to the pageone <b>note:</b>: <strong>none</strong> default effect <a href="#pageone" data-transition="none">go to the pageone</a></p>
</div>
<div data-role="footer">
<h1>footer content</h1>
</div>
</div>
</body>
</html>