4

私は現在、コンピューター システムとタブレットの両方で実行する必要がある Web アプリを開発しています。スマートフォンでも可能性があります。現在、メニューは 1 つのページにあり、横に並んでいます。タブレットやスマートフォンと同じように、コンテンツをスワイプしてメニューを切り替えることができるというアイデアです。さらに、メニューを切り替えるために使用されるコンピューター ユーザー用のボタンがあります。

メニュー コンテンツは JQuery の AJAX 関数を使用して読み込まれ、メニューは JQuery のアニメーション関数を介して移動します。

どうすればこのアニメーションを適切に作成できるのだろうかと考えていました。スワイプするときは、速度、方向、距離を考慮する必要があります。ボタンをクリックするときは、静的な速度を適用する必要があります。

誰でもアイデアはありますか？

4

1 に答える 1

5

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.
       });

    });
于 2012-12-21T04:22:09.510 に答える