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.
Thanks!
