Animate issue

by Guruprasad Rao

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.js"></script>
<div class="container">



  <div class="slide">
    <div class="pad" style="">x</div>
	
  </div>
<a class="btn">X</a>

  

  <div class="clearBoth"></div>
</div>

<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>

CSS

.container {
  position: fixed;
  right: 0;
  top: 100px;
  width: 300px;
}

.slide {
  background: red;
  color: #fff;
  float: right;
  width: 250px;
}

.pad {
  padding: 30px;
}

.btn {
  position:absolute;
  width: 50px;
  height: 50px;
  background: #000;
}

JavaScript

$(window).scroll(function() {
  var right=0;
  
  if ($(this).scrollTop() > 0) {
    $('.slide').hide("slide", {
      direction: "right"
    }, 500);
	right='0';
  } else {
  right='250';
    $('.slide').show("slide", {
      direction: "right"
    }, 500);
  }
 
  $('.btn').animate({
  	right:right
  },500)
 
  
});

$(".btn").click(function() {

  $('.slide').hide("slide", {
    direction: "right"
  }, 500);
  return false;
  
});