Comment aurais-je doucement déplacer un élément à l'aide de Hammer.js et JQuery?

Je suis en train de développer une application web, qui a pour exécuter sur les systèmes informatiques et les tablettes. Peut-être même les smartphones.
Maintenant, les menus sont sur une seule page, les uns à coté des autres. L'idée est que vous pouvez changer de menu en faisant glisser le contenu, tout comme vous le feriez sur les tablettes et les smartphones. De Plus, il y a des boutons pour les utilisateurs d'ordinateur qui sera utilisé pour basculer entre les menus.

Menu contenu sera chargé à l'aide de JQuery AJAX fonctions du menu et du mouvement par le biais de fonction animate de JQuery.

Maintenant, je me demandais comment je pourrais faire cette animation correctement. Lorsque le balayage j'aurais besoin de prendre de la vitesse, la direction et la distance insto compte. Lorsque vous cliquez sur des boutons, une statique de vitesse doit être appliquée.

Personne des idées?

Bien que cet exemple n'utilise pas JQuery, ni Hammer.js, vous pourriez être en mesure d'obtenir quelque chose hors de lui: jsfiddle.net/7etUR
Semble bon, même si c'est un peu de lag lors de l'utilisation sur mon iPhone. Aussi, je préfère un Marteau/JQuery combo que ceux qui ont beaucoup de fonctionnalités pour ce faire, déjà.
Pourquoi ne pas donner le jQuery.mobile les événements de mouvement d'un aller? Vous pouvez obtenir une version personnalisée pour les événements de mouvement qui a un très faible encombrement, et il va s'attacher en toute transparence avec votre existant jQuery cliquez sur événements (il suffit de remplacer 'cliquez sur' avec 'swipeleft'/'swiperight').

OriginalL'auteur RemiDG | 2012-11-08

  1. 5

    Personnalisation à l'aide de hammer.js c'est très facile. Si vous allez à travers les exemples donnés par eux, il serait de vous donner une idée juste de la fonctionnalité. Cependant, cet exemple va vous donner une idée de la façon dont les transitions.

    Si vous insistez sur l'utilisation de l'animate/hammer.js cette structure permettra::

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

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

    });
    Je suis cogner votre réponse parce que le violon semble être rompu. Avez-vous l'esprit de le réparer? Serait grandement apprécié!
    J'ai modifié le lien dans la réponse. Les sources externes ont été modifiés. Par conséquent, il a été brisé. Merci pour le tuyau. 🙂

    OriginalL'auteur Nupur