Defining a return-transition between page changes

Question

I am using jQueryMobile's $.mobile.changePage(...) method to switch to a different page within my project.

$.mobile.changePage("#foo", {
 transition:"slide"
});

When I run that method, the transition works perfectly but when I hit the browser's return button I see no reverse transition.

I played around with some of the parameters described in http://jquerymobile.com/test/docs/api/methods.html but had no luck.

Especially setting reverse:true just reversed the transition when moving forward to the target page but there is still no transition when I hit the back button.

---

Update: It seems like seeing data-rel="back" does the trick for "orginary links" defined via the <a>-tag BUT what I need is the JavaScript equivalent when calling the $.mobile.changePage() function.

Answer 1

Have a look at this page, http://jsfiddle.net/nachiket/mDTK2/show/light/
Works fine with me.

Click (on page 1) shows transition from Left to right, & Back button (on page 2) shows transition from right to left.

Source: http://jsfiddle.net/nachiket/mDTK2/
If it is not working fine, than please share your browse and other details.
If example is working fine, but not your code, make a jsfiddle highlighting your problem, so I can check and update code/answer.

Answer 2

For the links you want to have the reverse transition on you can use data-direction="reverse" with data-rel="back"

Example:

<div data-role="page" >
    <div data-role="header"><h3> Header </h3> </div>
    <div data-role="content" >    
        <a href="#page2" data-role="button" data-transition="slide">Page 2</a>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header"><h3> Header </h3> </div>
    <div data-role="content" >    
        <a href="#" data-rel="back" data-role="button" data-direction="reverse" >Back</a>
    </div>
</div>​

jsFiddle:

• http://jsfiddle.net/GEDcF/

Docs:

• http://jquerymobile.com/demos/1.1.1/docs/api/data-attributes.html

UPDATE

From your comment

"Yeah, but how do I do that with the JavaScript function $.mobile.changePage()?"

Docs:

• http://jquerymobile.com/demos/1.1.1/docs/api/methods.html

Quote:

Properties:
     reverse (boolean,  default:    false) Decides what direction the transition will run when showing the page.