title: Sliding div out with css and jquery without triggering scrollbar?
body: <p>I've been wrestling with this for way too long. </p>
  
  <p>Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems: </p>
  
  <ul>
  <li>I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen. </li>
  <li>When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way. </li>
  </ul>
  
  <p><a href="https://jsfiddle.net/alexflores67/6mnuj2jz/19/#&amp;togetherjs=kJQH77iEqM" rel="nofollow" title="THANKS! :)">JSFiddle</a></p>
  
  <p>CSS: </p>
  
  <pre><code>#abs {
  position: absolute; 
  height: 200px;
  width: 200px;
  background-color: grey;
  left: 0;
  top:0;
  transition: transform 3s;
  }
  
  .open {
    transform: translateX(1050px);
   }
  
  .hide {
     display: none;
   }
  
   p {
      text-align: center;
   }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>  $('#clickMe').on('click', function(){
      $('#abs').toggleClass('open');
      if($("#abs").hasClass("open")) { 
          setTimeout(
          function() {
              $("#abs").hide();
          },
          2500);
  } else {
      $("#abs").show();
  }
  })
  </code></pre>