jQuery Mobile: Transitions

To move from page to page, jQuery Mobile provides a few CSS-based transition effects that you can apply to a page link.

Some of the common transitions are flip, slide and pop.

The transition effects were first implemented by David Kaneda in jQTouch and jQuery Mobile has adapted it and built the effects into jQM.

To apply flip transition effect, we only have to add data-transition=’flip’  to the page link line.

The line would be:

<a href='#pagetwo' data-transition='flip' data-role='button'>Click Me</a>
Transitions
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page' id='pageone'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Your page one content here</p>
        <a href='#pagetwo' data-transition='flip' data-role='button'>Click Me</a>
    </div>
</div>
<div data-role='page' id='pagetwo'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>You are at page two!</p>
        <a href='#pageone' data-role='button'>Go Back</a>
    </div>
</div>
</body>
</html>
Try The Code

For a complete demo of jQM transition effects, you can refer to the official jQM site.

Series Navigation<< jQuery Mobile: Dialog box
jQuery Mobile: Button examples >>