# 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?

• There is not much to code review really. You will have more luck on Stackoverflow. – konijn Apr 7 '14 at 13:40

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