Hammer.js 및 JQuery를 사용하여 요소를 부드럽게 이동하는 방법은 무엇입니까?

Question

현재 컴퓨터 시스템과 태블릿 모두에서 실행해야하는 웹 앱을 개발 중입니다. 스마트 폰 일 수도 있습니다. 이제 메뉴는 한 페이지에 있고, 가로로 서로 옆에 있습니다. 아이디어는 태블릿과 스마트 폰에서 할 수있는 것처럼 콘텐츠를 스 와이프하여 메뉴를 전환 할 수 있다는 것입니다. 또한 메뉴를 전환하는 데 사용할 컴퓨터 사용자를위한 버튼이 있습니다.

메뉴 콘텐츠는 JQuery의 AJAX 기능을 사용하여로드되며 메뉴는 JQuery의 애니메이션 기능을 통해 이동합니다.

이제이 애니메이션을 어떻게 적절하게 만들 수 있는지 궁금합니다. 때 나는 속도, 방향 및 거리 insto 계정을해야 할 것입니다. 버튼을 클릭 할 때 정적 속도를 적용해야합니다.

누구나 아이디어가 있습니까?

Answer 1

hammer.js를 사용하여 커스터마이징하는 것은 매우 쉽습니다. 주어진 예제를 살펴 보았다면 기능에 대한 올바른 아이디어를 얻을 수 있습니다. 그러나 this example은 전환이 어떻게 될지에 대해 알려줍니다.

당신이 애니메이션/hammer.js를 사용하여 주장하는 경우,이 구조는 도움이 될 것입니다 : 예 JQuery와도 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. 
     }); 

    });