슬라이드 스타일 1

아....이 단순한거 하나 할라고ㅋㅋㅋㅋㅋ.....삽질에 삽질을 거듭했구만...ㅠㅠ


$(document).ready( function(){
 $('.btnL').toggle(
    function () {
   $(this).animate({'left':'-=150px'}, '1000');
    },
    function () {
   $(this).animate({'left':'+=150px'}, '1000');  
    }
  ); 
 
 $('.btnL').click(function(){
  $('.left').animate({width: 'toggle'}, '1000');
 });
});


<style type="text/css">

.wrap{width:500px; height:300px;}
.btnL{position:absolute; left:150px; top:141px; width:30px; height:18px; background:yellow; cursor:pointer; z-index:100;}
.btnR{position:absolute; right:150px; top:141px; width:30px; height:18px; background:yellow; cursor:pointer; z-index:100;}
.center{position:relative; height:300px; background:#ccc;}
.left{position:absolute; left:0; width:150px; height:300px; background:green; z-index:99;}
.right{position:absolute; right:0; width:150px; height:300px; background:green; z-index:99;}

</style>

<div class="wrap"> 
 <div class="center">
  center  
  <div class="btnL">click</div>
  <div class="btnR">click</div>
  <div class="left">left</div> 
  <div class="right">right</div> 
 </div> 
</div>