javascript - 如何使用 Hammer.js 和 JQuery 顺利移动元素？

Question

我目前正在开发一个网络应用程序，它必须在计算机系统和平板电脑上运行。甚至可能是智能手机。现在，菜单在一页上，水平相邻。这个想法是你可以通过滑动内容来切换菜单，就像你可以在平板电脑和智能手机上做的那样。此外，还有一些供计算机用户使用的按钮，用于切换菜单。

菜单内容将使用 JQuery 的 AJAX 函数加载，菜单移动通过 JQuery 的动画函数。

现在我想知道如何正确制作这个动画。滑动时，我需要考虑速度、方向和距离。单击按钮时，应应用静态速度。

有人有什么想法吗？

Answer 1

使用hammer.js 进行定制非常容易。如果您只是浏览他们提供的示例，它将使您对功能有一个公平的了解。但是，此示例将使您了解转换的方式。

如果你坚持使用 animate/hammer.js，这个结构会有所帮助::

 $('#elementID').hammer().on('swipe', function(e){
    e.preventDefault();
   $('#your-content-ID').animate({
       opacity: 0.25,
       left: '+=50',
       height: 'toggle'

     }, 5000, function() {
        // Animation complete.
       });

    });