在移动主屏幕上滑动网页上的div

Question

我正在构建一个移动微型网站，其功能类似于应用程序（具有触摸交互功能）。

我有一个下拉菜单，其中包含几乎全屏的div，我希望用户可以在其间滑动，如下所示：

---

---

我已经包含了jQuery Mobile库以获取滑动事件，这些事件正在运行，但是div不能顺利滑动，偶尔也会消失，迫使我刷新页面。

在上面的图片示例中，在滑动时，div＃1将完全滑动（隐藏）到左侧，然后 div＃2将在相同方向上滑动（显示）， div＃1完全隐藏。我需要同时发生这两个事件，所以div＃1和＃2之间没有差距。

至于消失的问题，我不知道是什么导致了这个，对不起。这是一些相关的代码......

的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);
});

如果有更好的方法，我会全力以赴。

谢谢！

Answer 1

尝试：

<强> SwipeJS

或

查看this answer，其中介绍了如何在正常使用之外使用jquery移动转换。