如何使用Hammer.js和JQuery順利移動元素？

我目前正在開發一個Web應用程序，它必須在計算機系統和平板電腦上運行。可能甚至是智能手機。現在，菜單在一個頁面上，水平地相鄰。想法是，您可以通過滑動內容來切換菜單，就像在平板電腦和智能手機上一樣。此外，還有用於計算機用戶的按鈕，用於切換菜單。如何使用Hammer.js和JQuery順利移動元素？

菜單內容將使用JQuery的AJAX函數加載，菜單將通過JQuery的動畫函數進行移動。

現在我想知道如何正確地製作這個動畫。刷時，我需要採取速度，方向和距離帳戶。點擊按鈕時，應該應用靜態速度。

任何任何想法？

來源

2012-11-08 RemiDG

雖然這個例子沒有使用JQuery也不Hammer.js，你也許能夠得到的東西它：http://jsfiddle.net/7etUR/ –

@JeffreySweeney - 看起來不錯，雖然這是有點laggy在我的iPhone上使用它。另外我更喜歡Hammer/JQuery組合，因爲那些已經有很多功能可以完成這些工作。 – RemiDG

爲什麼不給jQuery.mobile手勢事件呢？您可以獲得腳印事件的自定義構建，這些腳本事件的佔用空間非常小，並且可以與現有的jQuery點擊事件無縫配合（只需將'click'替換爲'swipeleft'/'swiperight'）即可。 – monners

使用hammer.js進行自定義非常簡單。如果你只是通過他們給出的例子，它會給你一個公平的功能的想法。但是，this example會讓您瞭解轉換過程如何。

如果您堅持使用動畫/ 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-21 04:22:09 Nupur

因爲小提琴似乎被打破，我正在碰撞你的答案。你介意修理它嗎？將不勝感激！ – RemiDG

我已編輯答案中的鏈接。外部來源發生了變化。因此它被打破了。感謝您指出。 :) – Nupur

如何使用Hammer.js和JQuery順利移動元素？

回答

相關問題