Question

So what im trying to achieve is, applying any page transition when manually creating a page change.

so for example, say that on my webpage, i make it so that when the user swipes right, the website goes to a second page….like so

$('#firstPage').bind("swiperight", function(){
            //alert("swiped right on the body element");
            $.mobile.changePage('#secondPage'); 

        });

now i want to attach a page transition to this function. if it was on an actual link, then one would apply a data-transition but since this page change is being manually created, im wondering how to append a transition to it.

i tried for example

    $('#firstPage').bind("swiperight", function(){
        //alert("swiped right on the body element");
        $.mobile.changePage('#secondPage','flip');  

    });

etc but to no avail, Any ideas how i would put this into effect?
Thanks in advanced.

Answer 1

You’ve almost got it, you just need to declare the second paramater of the function (your options) within the {} parenthesis:

$('#firstPage').bind("swiperight", function(){

    //alert("swiped right on the body element");
    $.mobile.changePage( "#secondPage", { transition: "flip"} );

});