것은

Question

http://ballsohard.co.uk/bshmfwfm/stack.html#

위의 URL을 클릭하십시오. 나는 2 개의 다른 전시 선택권이있는 메뉴가있다. 'categories'를 클릭하면 두 번째 메뉴가 표시됩니다. 전환을 만들려고합니다. 옵션 중 하나를 클릭하면 메뉴가 오른쪽으로 이동하고 새 메뉴가 왼쪽에서 슬라이드됩니다.

나는 이것에 대한 다양한 jQuery 메서드를 살펴 보았지만 jsfiddle 예제를 가지고 놀았지만 그걸 이해할 수는 없다. 위치 내에서 절대 :

나는이하십시오

Answer 1

가받은 위치 탐색 요소를 설정하고 몇 가지 도움이 필요 상대 컨테이너를 화면에서 떨어져 그들을 이동 '왼쪽'또는 '권리'속성을 변경 .animate()를 사용합니다.

Answer 2

이 사이트는 슬라이딩 요소에 대한 좋은 튜토리얼이 있습니다

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

Answer 3

난 그냥 모든 jQuery를 사용하지 않고 동일한 을 관리했습니다 ...

function hMove(element, endPos, duration) { 
    // element = DOM element to move 
    // endPos = element.style.left value for the element in its final position 
    // duration = time in ms for the animation 

// var leftPos = element.style.left.replace(/px/,""); // Get the current position of the element 
    var leftPos = window.getComputedStyle(element,null).getPropertyValue("left").replace(/px/,""); 
    var animStep = (leftPos - endPos)/(duration/10); // Calculate the animation step size 
    var direction = (leftPos > endPos) ? "left" : "right"; // Are we moving left or right? 

    function doAnim() { // Main animation function 

     leftPos = leftPos - animStep; // Decrement/increment the left position value 

     element.style.left = leftPos + "px"; // Apply the new left position value to the element 

     // Are we done yet? 
     if ((direction == "left" && leftPos <= endPos) || (direction == "right" && leftPos >= endPos)) { 
      clearInterval(animLoop); // Stop the looping 
      element.style.left = endPos + "px"; // Correct for any fractional differences 
     } 
    } // and of main animation function 

    var animLoop = setInterval(doAnim, 10); // repeat the doAnim function every 10ms to animate 
} 

전체에게 이 솔루션의 작업 데모 (숨기기/표시 할 추가 토글 기능 포함)는 다음과 같습니다. http://jsfiddle.net/47MNX/16/

그것은 단지 직선 자바 스크립트를 사용하며 매우 유연하고 적응력이 있어야합니다.

-FM