Question

I have 2 pages embedded on my single HTML file. so what it does is that initially it shows PAGE1, then if i swipe from right to left OR left to right PAGE2 should show. my problem is how can I change the page animation based on my swipe? like when I swipe form right to left the animation should be the page scrolling from right to left and vice versa?

i am aware of the page swipe events but i dont know how to programatically change its animation

thank you!

Answer 1

Updated Answer:

If you’re looking for page transitions I would suggest reading:

• http://jquerymobile.com/demos/1.0/docs/api/methods.html
• http://jquerymobile.com/demos/1.0/docs/pages/page-transitions.html

Example:

Adding this attribute will slide from right to left

data-transition="slide"

Adding these attributes will slide from left to right

data-transition="slide" data-direction="reverse"

Original Answer below:

Live Example:

• http://jsfiddle.net/yxzZf/4/

JS:

$("#listitem").swiperight(function() {
    $.mobile.changePage("#page1");
});

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <p>
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li id="listitem">Swipe Right to view Page 1</li>
            </ul>
        </p>
    </div>
</div>

<div data-role="page" id="page1"> 
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c">
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">Back to the Home Page</a></li>
        </ul>

        <p>
            Yeah!<br />You Swiped Right to view Page 1
        </p>
    </div>
</div>

Related:

• Adding JQM swipe event to listview link
• Adding jquery mobile swipe event