javascript - How would I smoothly move an element using Hammer.js and JQuery? - Stack Overflow

admin管理员组

文章数量:1323714

I'm currently developing a web-app, that has to run on both puter 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 puter 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.

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?

I'm currently developing a web-app, that has to run on both puter 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 puter 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.

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?

• javascript
• jquery
• html
• css
• hammer.js

Share Improve this question Follow asked Nov 8, 2012 at 15:13 VenederisVenederis 1,06744 gold badges1111 silver badges1818 bronze badges 3

• 1 While this example doesn't use JQuery nor Hammer.js, you might be able to get something out of it: jsfiddle/7etUR – Jeffrey Sweeney Commented Nov 8, 2012 at 15:33
• @JeffreySweeney - Looks good, although this is a little laggy when using it on my iPhone. Also I would prefer a Hammer/JQuery bo as those have a lot of functionality to do this already. – Venederis Commented Nov 9, 2012 at 8:25
• Why not give the jQuery.mobile gesture events a go? You can get a custom build for gesture events that has a very small footprint, and it'll tie in seamlessly with your existing jQuery click events (just replace 'click' with 'swipeleft'/'swiperight'). – monners Commented Nov 26, 2012 at 2:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 example will give you a sense of how the transitions will be like.

If you insist on using the animate/hammer.js, this structure will help::

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

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

    });

本文标签： javascriptHow would I smoothly move an element using Hammerjs and JQueryStack Overflow