div를 페이지 뷰로 들어오고 나가는 모습을 simutaniously

Question

메신저 자바 스크립트에 상당히 새로운. Ive는 필자가 필요로하는 것과 비슷한 것을하기 위해 필자가 발견 한 스크립트를 채택했지만 필자가 원하는대로 작동하지는 않았다. 나는 오랜 설명에 대해 사과드립니다.

나는 6 개의 버튼이 있고 왼쪽의 div는 1-3이고 오른쪽의 div는 4 - 6 버튼이다.

스크립트를 실행하면 아무 div도 표시되지 않아야합니다.

버튼 # 1을 클릭하면 div # 1이 왼쪽에서 슬라이드 한 다음 컨테이너 왼쪽에서 자체 너비에 배치됩니다. 이것은 div # 2와 div # 3에 대해 버튼 # 2와 버튼 # 3에 해당합니다. 한 번에 한 div 만 볼 수 있으므로 버튼 # 2는 div # 1과 div # 3을 숨기고 div # 2, ect를 표시합니다. 다른 모든 버튼과 동일합니다.

버튼 # 4를 클릭하면 div # 4가 오른쪽에서 벗어나 컨테이너 오른쪽에서 자체 너비에 배치됩니다. 다른 버튼을 클릭 할 때 div를 숨기는 것은 위와 동일하므로 한 번에 1 div 만 볼 수 있습니다.

도움을 크게 받으실 수 있습니다.

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 




$(window).load(function(){ 

    $('.button-left').click(function() { 
    var index = $(this).index(".button-left"); 
    var $box = $(".box-left:eq(" + index + ")"); 

    $(".box-left").not($box).animate({ 
     left: '150%' 
    }, 500); 

    if ($box.offset().left < 0) { 
     $box.css("left", "150%"); 
    } else if ($box.offset().left > $('#container').width()) { 
     $box.animate({ 
      left: '25%', 
     }, 500); 
    } 
}); 

    $('.button-right').click(function() { 
    var index = $(this).index(".button-right"); 
    var $box = $(".box-right:eq(" + index + ")"); 

    $(".box-right").not($box).animate({ 
     left: '150%' 
    }, 500); 

    if ($box.offset().left < 0) { 
     $box.css("left", "150%"); 
    } else if ($box.offset().left > $('#container').width()) { 
     $box.animate({ 
      left: '105%', 
     }, 500); 
    } 
}); 
}); 




</script> 
<style type="text/css"> 
#container { 
    position: absolute; 
    margin: 0px; 
    margin-left:auto; 
    margin-right:auto; 
    padding: 0px; 
    width:1024px; 
    height:568px; 
    overflow: hidden; 
    background-color:#999999; 
} 

.box-left { 
    position: absolute; 
    width: 200px; 
    height: 300px; 
    line-height: 300px; 
    font-size: 50px; 
    text-align: center; 
    border: 2px solid black; 
    left: 150%; 
    top: 100px; 
    margin-left: -25%; 
} 

.box-right { 
    position: absolute; 
    width: 200px; 
    height: 300px; 
    line-height: 300px; 
    font-size: 50px; 
    text-align: center; 
    border: 2px solid black; 
    top: 100px; 
    margin-left: -25%; 

} 

#box1 { 
    background-color: green; 
    left:260px; 
} 

#box2 { 
    background-color: yellow; 
} 

#box3 { 
    background-color: red; 
} 

#box4 { 
    background-color: orange; 
    right:0px; 
} 

#box5 { 
    background-color: purple; 
} 

#box6 { 
    background-color: brown; 
} 
</style> 



<div class="button-left"><a href="#">Click Box #1</a> </div> 
<div class="button-left"><a href="#">Click Box #2</a> </div> 
<div class="button-left"><a href="#">Click Box #3</a> </div> 

<div class="button-right"><a href="#">Click Box #4</a> </div> 
<div class="button-right"><a href="#">Click Box #5</a> </div> 
<div class="button-right"><a href="#">Click Box #6</a> </div> 


<div id="container"> 

    <div id="box1" class="box-left">Box #1</div> 
    <div id="box2" class="box-left">Box #2</div> 
    <div id="box3" class="box-left">Box #3</div> 
    <div id="box4" class="box-right">Box #4</div> 
    <div id="box5" class="box-right">Box #5</div> 
    <div id="box6" class="box-right">Box #6</div> 

</div> 

Answer 1

jsfiddle.net/KFqvf

이있다. 그냥 항목을 선택 왼쪽과 오른쪽, 그리고 간단한 메뉴에서 슬라이드 간단한 JQuery와 애니메이션 기능을 필요로 제가 당신이 원하는 생각을 가진 jsfiddle!

희망이 당신이 오히려 시도하고 텍스트의 벽과 코드의 벽을 구문 분석 지역 사회를 요구하는 것보다 [jsfiddle] (http://jsfiddle.net/)를 만들 제안