여러 개의 버튼으로 슬라이딩 div 제어하기

Question

전체 화면 div와 오버 플로우가 숨겨진 페이지 만들기. 화면의 왼쪽, 아래 및 오른쪽에 각각 3 개의 div가 있으며 해당 div가 페이지 위로 슬라이드되도록하는 해당 버튼이 있습니다 (여백 설정을 사용하여 페이지를 이동하고 숨길 수 있음).

매우 간단한 코드로 작업했지만이 페이지의 상태를 기억하기 위해 고급 코드가 필요하므로 동일한 버튼으로 div가 다시 이동되지 않거나 각 div가 원래 위치로 되돌아갑니다 다른 버튼을 누르면

내 생각이었다 그것은

설정 초기 pagestate = 1

과 같이 될 수 있다는 경우 pagestate = 1 onlcick에 div1 애니메이션

버튼 1을 (어떤 버튼이 어떤 div의가 표시되지 누르지) page, set pagestate = 2
버튼 2 onlcick 페이지에 div2를 활성화하고, 페이지 설정 = 3으로 설정하십시오.
버튼 3 onlcick 페이지에 애니메이션 div3 설정, pagestate = 4 설정

다른

는 pagestate = 2 인 경우 (버튼 1 가압 DIV 1 개) 정렬

버튼 1 onlcick 아무것도 2 onlcick 페이지에 DIV2 애니메이션
버튼하지 않는다 div1 오프 페이지 설정 pagestate 애니메이션 = 3
버튼 3 onlcick div1 오프 페이지를 애니메이션, 페이지에 div3 애니메이션을 설정 pagestate = 4

등

나는 아래의 코드를 사용하고 누군가 날이 내가 envisio 방법을 작동하는 데 도움 수 있다면 감사하겠습니다

N

근무 코드 :

$('#button1').click(function() { 
     $('#div1').animate({ 
     'marginLeft' : "+=100%" 
     }); 
    }); 

내가 상상하는 방법이 작동하지 않을 수 있습니다 :이가 표시되지 않습니다

$ (문서) .ready (함수() {

var state = 1; 


$('#button1').click(function() { 


    if (state = 1) {  

    $('#div1').animate({ 
    'marginleft' : "+=100%" 
    }); 


    state = 2; 

    } 

    else if (state = 3) { 

     $('#div1').animate({ 
     'marginLeft' : "+=100%" 
     }); 

      $('#div2').animate({ 
     'marginTop' : "-=100%" 
     });  

     state = 2; 

     } 

     else if (state = 4) { 

     $('#div1').animate({ 
     'marginLeft' : "+=100%" 
     }); 

      $('#div4').animate({ 
     'marginRight' : "-=100%" 
     }); 

     state = 2; 

     } 

continued for each of the other 2 buttons. 

을 나는이 일을 훨씬 더 우아하고 효율적으로 수행 할 수있는 방법이 있다고 확신합니다. 그래서 누군가가 도와 주면 크게 감사 할 것입니다.

Answer 1

데모 : http://jsfiddle.net/CJ_/k4qyoufo/

이 잘하면 도움이 될 것입니다, 그것에 대해 이동하는 여러 가지 방법 중 하나입니다 (그리고 당신이 찾고있는 약이다!)

이 '의 배열을 정의함으로써 시작하세요

states "-이 예제에서는 명시 적으로 여백 값을 상태로 사용했지만, 0과 1 또는 그에 맞게 수정 된 논리로 설정 될 수도 있습니다. 이것들은 각 시나리오에 대해 1보다는 각 div에 대한 상태를 설정합니다 (이 경우 3 개의 다른 상태 값은 보이는 div의 각 조합에 하나씩있는 경우 8에 반대합니다!

$('#but1').click(function() { 
    states[0]=(states[0]==0)?-100:0; 
    states[1]=100; 
    states[2]=100; 
    update(); 
}); 

$('#but2').click(function() { 
    states[0]=-100; 
    states[1]=(states[1]==100)?0:100; 
    states[2]=100; 
    update(); 
}); 

$('#but3').click(function() { 
    states[0]=-100; 
    states[1]=100; 
    states[2]=(states[2]==0)?100:0; 
    update(); 
}); 

:)

var states = [-100, 100, 100]; 

다음 각 버튼에 대해, 필요에 따라 주 어레이 (화면 오프로 본 DIV의 전환 가치와 다른 설정) 다음 업데이트 함수 호출을 변경하는 함수를 정의

이 기능은 적절한 여백을 버튼을 누르면 주어진 값으로 설정합니다.

function update() { 
    $('#div1').animate({ 
     'marginLeft' : states[0] + "%" 
    }); 
    $('#div2').animate({ 
     'marginTop' : states[1] + "%" 
    }); 
    $('#div3').animate({ 
     'marginLeft' : states[2] + "%" 
    }); 
}