Question

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

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

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

任何想法？

Answer 1

使用hammer.js进行自定义非常简单。如果您只是浏览他们给出的示例，它会让您对功能有一个全面的了解。但是，this example会让您了解过渡的结果。

如果你坚持使用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.
       });

    });

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

1 个答案: