Question

I have made a simple application for my iphone using jQuery Mobile and Phonegap. it works very well, but the application used the following to transition to another page and that was slow as hell:

<a data-role="button" id="about_link" data-transition="slide" 
     href="#page3" data-icon="gear" data-iconpos="left">
     Settings
</a>

Just a simple a is doing the magic here and that resulted in the weird 400ms lag etc…

Now after a lot of reading I made the a button a div and handled the click event myself to make the button faster.

$("#about_link").live("touchstart", function(){
    slideTo('#page3',false);
});
function slideTo(page,reverse){
    $.mobile.changePage( page, {
        transition: "slide",
        reverse: reverse
    } );
}

The difference is significant, but it’s still too slow for my taste. It looks like jQuery Mobile waits for the entire button animation (hover and clicked) to finish before it goes over to the other page.

Now my questions:

1. Is touchstart the fastest way? I used other libraries like fastclick but that wasnt super fast either.
2. Is the button animation the badguy here? Can I disable it then?
3. Can you guys give me tips? Google isnt my friend on this particular problem…

Gr.

Answer 1

It’s actually in jquery mobile’s css:

.in, .out {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 350ms !important;
}

Just tweak the ms and you’re good.