jquery로 div에서 슬라이드 만들기

Question

두 개의 버튼으로 div를 만들려고합니다. 첫 번째 버튼을 클릭하면 노틸러스 div가 왼쪽에서 슬라이드됩니다. 단추를 클릭하면 화면에서 뒤로 슬라이드됩니다. 메인 div의 두 번째 버튼과 동일합니다. 두 번째 버튼을 클릭 할 때 div가 오른쪽에서 슬라이드됩니다. 다시 스크린에서 뒤로 슬라이드시키는 버튼이 있습니다.

이것은 모두 jquery에서 완료됩니다.

아무도 나에게 무슨 문제가 있다고 말할 수 있습니까?

JQuery와 :

var boxWidth = $("#port2").width(); 

$('#left').on('click',function(){ 
    $('#port1').animate({left:'8'}); 
}); 

$('#right').on('click',function(){ 
    $('#port2').animate({(right:'100%'-boxWidth}); 
}) 

$('#leftC').on('click',function(){ 
    $('#port1').animate({right:'100%'}); 
}); 

$('#rightC').on('click',function(){ 
    $('#port2').animate({left:'100%'}); 
}); 

HTML :

<div id="wrapper"> 
    <div id="port1"> 
     Left text goes here 
     <button id='leftC'>Close 1</button> 
    </div> 
    <div id="port2"> 
     Right text goes here 
     <button id='rightC'>Close</button> 
    </div> 
    <div id="text"> 
     good stuff goes here 
     <br /> 
     <button id='left'>Left</button> 
     <br /> 
     <button id='right'>Right</button> 
    </div> 
</div> 

CSS

#text{ 
    width:500px; 
    height:200px; 
    background-color:red; 
    font-weight:bold; 
    font-size:1.2em; 
    padding:25px; 
} 

#text button{ 
    margin: 20px 0px 10px; 
} 

#port1{ 
    width:500px; 
    height:200px; 
    background-color:green; 
    font-weight:bold; 
    font-size:1.2em; 
    padding:25px; 
    position:absolute; 
    left:-100% 
} 

#port2{ 
    width:500px; 
    height:200px; 
    background-color:yellow; 
    font-weight:bold; 
    font-size:1.2em; 
    padding:25px; 
    position:absolute; 
    right:-100%; 
} 

현재 작업에서 볼 수 있습니다 http://jsfiddle.net/belotte/vmu59h87/19/

감사합니다

Answer 1

Please look at the fiddle 
[See JsFiddle demo here ][http://jsfiddle.net/vmu59h87/21/] 


    [1]: 

당신이 잘못하고있는 모든 것은 당신이 자바 스크립트에서 왼쪽과 오른쪽에 대한 잘못된 값을 설정하고 있다는 것입니다. 방금 값을 변경하고 모든 것이 잘 작동합니다.

$('#left').on('click',function(){ 
    $('#port1').animate({left:'0'}); 
}); 
$('#right').on('click',function(){ 
    $('#port2').animate({right:'-30'}); 
}); 

$('#leftC').on('click',function(){console.log(">>>>>"); 
    $('#port1').animate({left:'-535'}); 
}); 

$('#rightC').on('click',function(){ 
    $('#port2').animate({right:'-535'}); 
}); 

Answer 2

권리 BTN가 두 번째로 클릭하면 실패지고 Ekansh에 의해 주어진다이 JSFIDDLE

바이올린을 확인하시기 바랍니다 (이유 같아요 오른쪽, 왼쪽 CSS 충돌).

$('#left').on('click',function(){ 
    console.log($('#port1').css('left')); 
    $('#port2').removeAttr('style'); 
    $('#port1').animate({left:'8'}); 
}); 

$('#right').on('click',function(){ 
    console.log($('#port2').css('right')+'right'); 
    $('#port2').removeAttr('style'); 
    $('#port2').animate({right:'-39px'}); 
}); 

$('#leftC').on('click',function(){ 
    $('#port1').animate({left:'-532px'}); 
}); 

$('#rightC').on('click',function(){ 
    $('#port2').animate({right:'-529px'}); 
}); 

Answer 3

Demo 다음은 작동 샘플입니다. div를 닫을 때 port1 및 port2 클래스에 설정된대로 애니메이션 메서드의 오른쪽 및 왼쪽 값을 원래 값으로 되돌립니다. 여기 코드와 실행 스 니펫이 있습니다.

//$('#port1').hide(); 
 
//$('#port2').hide(); 
 

 

 

 
$('#left').on('click', function() { 
 
    $('#port1').animate({ 
 
    left: '8' 
 
    }); 
 
}); 
 

 
$('#right').on('click', function() { 
 
    $('#port2').animate({ 
 
    right: '100' 
 
    }); 
 
}); 
 

 
$('#leftC').on('click', function() { 
 
    $('#port1').animate({ 
 
    left: '-100%' 
 
    }); 
 
}); 
 

 
$('#rightC').on('click', function() { 
 
    $('#port2').animate({ 
 
    right: '-100%' 
 
    }); 
 
}); 
 

 

 
/* 
 
$("#clickme").click(function() { 
 
    $("#book").animate({ 
 
    opacity: 0.25, 
 
    left: "+=50", 
 
    height: "toggle" 
 
    }, 5000, function() { 
 
    // Animation complete. 
 
    }); 
 
}); 
 
*/

#text { 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: red; 
 
    font-weight: bold; 
 
    font-size: 1.2em; 
 
    padding: 25px; 
 
} 
 
#text button { 
 
    margin: 20px 0px 10px; 
 
} 
 
#port1 { 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: green; 
 
    font-weight: bold; 
 
    font-size: 1.2em; 
 
    padding: 25px; 
 
    position: absolute; 
 
    left: -100% 
 
} 
 
#port2 { 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: yellow; 
 
    font-weight: bold; 
 
    font-size: 1.2em; 
 
    padding: 25px; 
 
    position: absolute; 
 
    right: -100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="port1"> 
 
    Left text goes here 
 
    <button id='leftC'>Close 1</button> 
 
    </div> 
 
    <div id="port2"> 
 
    Right text goes here 
 
    <button id='rightC'>Close</button> 
 
    </div> 
 
    <div id="text"> 
 
    good stuff goes here 
 
    <br /> 
 
    <button id='left'>Left</button> 
 
    <br /> 
 
    <button id='right'>Right</button> 
 
    </div> 
 
</div>