Animate slider

by Rayudu Ikkurthi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<div class="fixed">


<button>
    Click HERE
    </button>
    
    <div class="container">
    Some text
    </div>
    
   
</div>

CSS

.fixed{
  position:fixed;
  right:-200px;
  height:96vh;
}
button{
  position:absolute;
  top:50%;
  left:-98px;
}
.container{
  display:inline-block;
  background:#454545;
  height:100%;
  width:200px;
}

JavaScript

$('button').on('click', function(){
var rightValue = $('.fixed').css('right');
if(rightValue == '-200px'){
$('.fixed').animate({right:'0px'}, 500);
}
else{
$('.fixed').animate({right:'-200px'}, 500);
}

})