javascript - Creating a slide in div with jquery -

javascript - Creating a slide in div with jquery -

i trying create div 2 buttons. click first button , nother div slides in left. has button when clicked makes slide off screen. same sec button in main div. when sec button clicked div slides in right. 1 time again button makes slide off screen.

this done in jquery.

can tell me whats wrong here?

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"> 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%; }

you can see in action here: http://jsfiddle.net/belotte/vmu59h87/19/

thanks

please check jsfiddle

the fiddle given ekansh getting failed when right btn clicked sec time (reason right, left css clash guess).

$('#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'}); });

javascript jquery html jquery-animate