javascript 如何使用 Hammer.js 和 JQuery 平滑移动元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13291800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How would I smoothly move an element using Hammer.js and JQuery?
提问by RemiDG
I'm currently developing a web-app, that has to run on both computer systems and tablets. Possibly even smartphones. Now, the menus are on one page, horizontally next to each other. The idea is that you can switch menu by swiping the content, just like you can do on tablets and smartphones. Plus, there are buttons for computer users which will be used to switch menus.
我目前正在开发一个网络应用程序，它必须在计算机系统和平板电脑上运行。甚至可能是智能手机。现在，菜单位于一页上，彼此水平相邻。这个想法是你可以通过滑动内容来切换菜单，就像在平板电脑和智能手机上一样。此外，还有供计算机用户使用的按钮，可用于切换菜单。
Menu content will be loaded using JQuery's AJAX functions, and menu moving through JQuery's animate function.
菜单内容将使用 JQuery 的 AJAX 函数加载，菜单通过 JQuery 的 animate 函数移动。
Now I was wondering how I could make this animation properly. When swiping I would need to take speed, direction, and distance insto account. When clicking buttons, a static speed should be applied.
现在我想知道如何正确制作这个动画。刷卡时，我需要考虑速度、方向和距离。单击按钮时，应应用静态速度。
Anyone any ideas?
有人有什么想法吗？
回答by Nupur
Customizing using hammer.js is very easy. If you just go through the examples given by them, it would give you a fair idea of the functionality. However, this examplewill give you a sense of how the transitions will be like.
使用hammer.js 进行定制非常容易。如果你只是通过他们给出的例子，它会让你对功能有一个很好的了解。但是，此示例将使您了解转换的方式。
If you insist on using the animate/hammer.js, this structure will help::
如果你坚持使用 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.
});
});
