Html 滑动动画以配合手势

我想实现一个滑动手势来替换我的web应用程序中当前的下一个/上一个按钮。我想我将使用jQuery Mobile、QuoJS或Hammer.js来识别刷卡手势

但是我如何实现滑动动画（类似于）以配合手势？

我不是像示例中那样在图像之间切换，而是映射到主干模型视图的html部分。

这最终解决了这个问题。我正在使用带有幻灯片效果的jQueryUI，但它看起来并不像我希望的那样好，我希望它看起来更像是在使用Obj-C的iOS上。但它必须这样做

var handleSwipeEvents = function() {
    $(function() {
        $('#myId').on('swipeleft', swipeHandler);
        $('#myId').on('swiperight', swipeHandler);
        function swipeHandler(event) {
            function slideEffect(swipeLeft, duration) {
                var slideOutOptions = {"direction" : swipeLeft ? "left": "right", "mode" : "hide"};
                $('#myId').effect("slide", slideOutOptions, duration, function() { // slide out old data
                    var slideInOptions = {"direction" : swipeLeft ? "right" : "left", "mode" : "show"};
                    $('#myId').effect("slide", slideInOptions, duration); // slide in new data
                    // Alter contents of element
                });
            }
            var swipeLeft = (event.type === "swipeleft");
            slideEffect(swipeLeft, 300);
        }
    });
};

我有一种感觉，使用CSS3和transition可以获得更好的结果，但我还没有成功