jQuery Mobile Transitions Example

August 23, 2014

jQuery mobile has many variety animated transitions. Mobile application supports CSS3 properties. These transitions are created using CSS3 transforms. Transition effects available on open page when one page goes to another page by clicking link. Transitions effect gives 3D look. The Transition effect can be applied to any link or form submission by data-transition attribute.
<a href="#link name" data-transition="slide">Slide to Page</a>
Transitions effect does not support lower version browser, it is supported by only higher version browsers.

jQuery Mobile Transitions Supported Browsers

           1. IE10 and above
           2. Google chrome 12 and above 
           3. Mozilla 16 and above
           4. Safari 4 and above

Now find more variety of transition support in jQuery mobile application

jQuery Mobile Transitions: Fade Example

Simply fade the page or dialog in over the previous content.
Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome to My Concretepage</h1>
  </div>
   <div data-role="main" class="ui-content">
    <p>Click on the link to see the fade effect.</p>
    <a href="#nextpage" data-transition="fade">Fade to Page Two</a>
  </div>
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
<div data-role="page" id="nextpage">
  <div data-role="header">
    <h1>Welcome to My Concretepage</h1>
  </div>
   <div data-role="main" class="ui-content">
    <p>Click on the link to go back.</p>
    <a href="#pageone">Go to Page One</a>
  </div>
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
</body>
</html>

jQuery Mobile Transitions: Flip Example

An animated page flip, rotating the current view out with the other view on the reverse side.
Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome to My Concretepage</h1>
  </div>

   <div data-role="main" class="ui-content">
    <p>Click on the link to see the flip effect.</p>
    <a href="#pagetwo" data-transition="flip">Flip to Page Two</a>
  </div>
  
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Welcome to My Concretepage</h1>
  </div>
<div data-role="main" class="ui-content">
    <p>Click on the link to go back.</p>
    <a href="#pageone">Go back to Page One</a>
  </div>  
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
</body>
</html>

jQuery Mobile Transitions: Pop Example

The page springs into view from the center of the screen.
Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome to my Concretepage</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Click on the link to see the pop effect.</p>
    <a href="#pagetwo" data-transition="pop">Pop to Page Two</a>
  </div>
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Welcome to my Concretepage</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Click on the link to go back.</p>
    <a href="#pageone">Go to Page One</a>
  </div>
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
</body>
</html>

jQuery Mobile Transitions: Slide Example

Slide in from the left or right, pushing previous content out of the way.
Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome to my Concretepage</h1>
  </div>
   <div data-role="main" class="ui-content">
    <p>Click on the link to see the slide effect.</p>
    <a href="#pagetwo" data-transition="slide">Slide to Page Two</a>
  </div>
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Welcome to my Concretepage</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Click on the link to go back. <b>Note</b>: fade is default.</p>
    <a href="#pageone">Go to Page One</a>
  </div>  
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
</body>
</html>

jQuery Mobile Transitions: Slidedown Example

Slide down from the top, over the top of the current content.
Example

 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome to my Concretepage</h1>
  </div>
    <div data-role="main" class="ui-content">
    <p>Click on the link to see the slidedown effect.</p>
    <a href="#pagetwo" data-transition="slidedown">Slide down to Page Two</a>
  </div>  
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Welcome to my Concretepage</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Click on the link to go back. <b>Note</b>: fade is default.</p>
    <a href="#pageone">Go to Page One</a>
  </div>  
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
</body>
</html>

jQuery Mobile Transitions: Slideup Example

Slide up to the top, revealing the next content below.
Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome to my Concretepage</h1>
  </div>
    <div data-role="main" class="ui-content">
    <p>Click on the link to see the slidedown effect.</p>
    <a href="#pagetwo" data-transition="slideup">Slide down to Page Two</a>
  </div>  
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Welcome to my Concretepage</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Click on the link to go back. <b>Note</b></p>
    <a href="#pageone">Go to Page One</a>
  </div>  
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
</body>
</html>

Each transition can be reversed by specifying the data-direction="reverse" property, though this is more useful for some transitions slide, flip, fade and pop. Find the data direction reverse right to left and left to right.
Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome to my Concretepage</h1>
  </div>

    <div data-role="main" class="ui-content">
    <p>Click on the link to see the slidedown effect.</p>
    <a href="#pagetwo" data-transition="slide">Slide down to Page Two</a>
  </div>
  
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Welcome to my Concretepage</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Click on the link to see the slide effect.(slides to the previous page from left to right).</p>
    <a href="#pageone" data-transition="slide" data-direction="reverse">Slide to Page One (reversed)</a>
  </div>  
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
</body>
</html>

LEARN MORE

JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5