Smoothen page transition for mobile devices

I have next/previous buttons on my site and all they do is slide sections of the site from left to right and vice versa, it is smooth and looks good on a desktop but on mobile devices it is a bit slow and jumpy.

if (type == "prev") {
    $(this).hide('drop', { direction: 'right' }, 600, function () { $('#dv' + page).show('drop', { direction: 'left' }, 600), $("input:text:visible:not([readonly]):first").focus(); });
} else {
    $(this).hide('drop', { direction: 'left' }, 600, function () { $('#dv' + page).show('drop', { direction: 'right' }, 600), $("input:text:visible:not([readonly]):first").focus(); });
}

Uses the built in jQuery functions to slide the current page out and the next/previous page in based on the current page number, then sets the focus on the first input box.

This was as simple as I could think to do it but maybe there is a better smoother way to do left/right transitions?

It sounds like the issue isn't really the code, just the performance of the hardware: A mobile device just can't redraw everything as fast as a desktop browser. Writing stuff in single lines does not increase performance!

However, you could try the hardware acceleration "hack" shown and explained here.

You should also consider using CSS transforms to do the actual animation, rather than jQuery's position: absolute trickery. All modern browsers (with the exception of Opera Mobile) support it, and such transforms are always hardware accelerated.

Lastly, since this is Code Review, I'd advice you to get rid of the repetition in your code:

var PAGE_SWAP_DURATION = 600; // define this once

function swapPage(outgoingPage, incomingPage, type) {
  var outDirection = type === "prev" ? "right" : "left",
      inDirection  = type === "prev" ? "left" : "right";

  outgoingPage.hide('drop', { direction: outDirection }, PAGE_SWAP_DURATION, function () {
    incomingPage.show('drop', { direction: inDirection }, PAGE_SWAP_DURATION, function () {
      // wait for the animation to finish; this is a complex selector
      // so it may cause the browser to stutter
      incomingPage.find("input:text:visible:not([readonly]):first").focus();
    });
  });
}

Apropos that selector: If possible, it would be better to find the correct input ahead of time, rather than run and re-run such a complex query on each page swap.

For instance, you could map out what inputs belong to what pages when the site first loads, and link them to their respective pages with .data(). Or you could give the inputs IDs or class names, which will make the selector much simpler.

StackExchange Code Review Q#46517, answer score: 5