In this tutorial lets add a transition effect while navigating between pages.

Add data-transition=”flip” in the href tag.

 

You can also use the following Transition effects.

  • slide
  • slidedown
  • slideup
  • fade

Complete code is given below.

 

<!DOCTYPE html>
<html>
<head>
    <title>Navigate</title>
    
    <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css” />
    <script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
    <script src=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js”></script>
</head>
<body>
    <div data-role=”page” id=”pg1″>
        <div data-role=”header”>
            <h1>
                Page 1 </h1>
        </div>
        
        <div data-role=”content”>
            
            <p> This is your first page </p>
            
            <a href=”#pg2″ data-role=”button” data-transition=”flip”>I wanna see page 2 </a>
    
            
        </div>
        
        
    </div>
    
    <div data-role=”page” id=”pg2″ data-add-back-btn=”true”>
    
        <div data-role=”header”>
            <h1>
                Page 2 </h1>
        </div>
        
        <div data-role=”content”>
            <p> This is your second page </p>
                <a href=”#pg1″ data-role=”button” data-transition=”flip”>I wanna see page 1</a>
    
        </div>
        
    </div>
    
       
</body>
</html>