Slide divs on webpage like mobile home screens

Slide divs on webpage like mobile home screens

I'm building a mobile microsite that is to function like an app (with
touch interaction).
I have a dropdown menu that has nearly full-screen divs which I want the
user to be able to swipe between, like so:







I've included the jQuery Mobile library to get swipe events, which are
working, but the divs are not sliding smoothly, and occasionally
disappearing altogether, forcing me to refresh the page.
In the above picture example, on a swipe, div #1 would slide (hide) to the
left fully, and then div #2 would slide (show) in the same direction, only
after div #1 fully hid. I need the two events to happen simultaneously, so
there isn't a gap between divs #1 and #2.
As for the disappearing problem, I have no idea what's causing that,
sorry. Here is some relevant code...
javascript:
$('#menu').on('swipeleft', 'div', function(event) {
$('#' + nextPage($(this).attr('id'),'l')).show('slide', { direction:
'right' }, 500);
$(this).hide('slide', { direction: 'left' }, 500);
});
$('#menu').on('swiperight', 'div', function(event) {
$(this).hide('slide', { direction: 'right' }, 500);
$('#' + nextPage($(this).attr('id'),'r')).show('slide', { direction:
'left' }, 500);
});
If there's a better way to do this, I'm all ears. I know it can be done.
I've seen it. :)
Thanks!