Question

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

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

我不是像示例中那样在图像之间翻转，而是将html部分映射到Backbone模型视图。

Answer 1

这终于“解决了”它。我正在使用具有幻灯片效果的jQuery-UI，但它看起来并不像我希望的那样好，我希望它看起来更像是在iOS上使用Obj-C。但它必须这样做。

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和转换可以获得更好的效果，但我没有成功。

滑动动画以使用手势

1 个答案: