title: How can I animate this div to slide left when the 'right' button is clicked jquery?
body: <p>How can I get the recent container or the thmbnl-recent divs to slide left abit every time the right button is clicked without the scrollbar to create a sliding div effect like youtube has.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('button').onclick(function(){
     $('#thmbnl-recent').animate({left: "-=500"}, 2000);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> /*----------Recent Projects----------*/
      
      
      #recent-container {
       width: 950px;
       height: 275px;
       background-color: ;
       border: solid;
       border-width: 1px;
       border-color: #d8d8d8;
       margin-bottom: 25px;
       position: absolute;
       overflow-x: scroll;
       overflow-y: hidden;
       white-space: nowrap;
      
      }
      
      .thmbnl-recent {
       padding: 20px 13px 0px 13px;
       width: 190px;
       display: inline-block;
       border: solid;
       border-width: 1px;
       border-color: #d8d8d8;
       background-color: white;
       transition: background-color 0.3s ease;
       cursor: pointer;
      
      }
      
      .thmbnl-recent h1 {
       text-align: center;
       font-family: "calibri light";
       font-size: 24px;
       margin: 0 auto;
       padding: 10px 0px;
       letter-spacing: 2px;
      }
      
      #recent-title {
       font-family: "calibri light";
       text-align: center;
       width: 950px;
       background-color: white;
       margin: 0 auto;
       padding: 10px 0px;
       position: relative;
       z-index: 2;
       border-top: solid;
       border-right: solid;
       border-left: solid;
       box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
       border-width: 1px;
       border-color: #d8d8d8;
      }
      
      .thmbnl-recent:hover {
       background-color: #e8e8e8;
       transition: background-color 0.3s ease;
      }
      
      .thmbnl-recent:active {
       background-color: #d1d1d1;
      }
      
      
      
      /*--------SLIDE IMAGE---------*/
      
      #gallery-container {
       margin: 75px 0px 45px 0px;
       text-align: center;
       border: solid;
       border-color: #d8d8d8;
       border-width: 1.5px;
      }
      
      #slide-section {
       text-align: center;
       background-color: white;
       padding: 20px 20px 0px 20px;
      
      }
      
      #gallery-container h1{
       padding: 15px 0 15px 0;
       margin: 0;
       font-family: "calibri light";
       font-size: 30px;
       border-bottom: solid;
       background-color: white;
       border-color: #d8d8d8;
       border-width: 1.5px;
       box-shadow: 0 7px 15px -2px rgba(0, 0, 0, 0.3);
       z-index: 3;
       position: relative;
      }
      
      #imgrow {
       margin-top: 20px;
       padding-bottom: 20px;
       display: flex;
       justify-content: space-between;
      
      }
      
      button{
       margin-top: 280px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h2 id="recent-title"&gt;Recent Projects&lt;/h2&gt;
  
  &lt;div id="recent"&gt;
   &lt;div id="recent-container"&gt;
    &lt;div class="thmbnl-recent"&gt;
     &lt;img src="http://placehold.it/190x190"&gt;
     &lt;h1&gt;Sample&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="thmbnl-recent"&gt;
     &lt;img src="http://placehold.it/190x190"&gt;
     &lt;h1&gt;Sample&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="thmbnl-recent"&gt;
     &lt;img src="http://placehold.it/190x190"&gt;
     &lt;h1&gt;Sample&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="thmbnl-recent"&gt;
     &lt;img src="http://placehold.it/190x190"&gt;
     &lt;h1&gt;Sample&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="thmbnl-recent"&gt;
     &lt;img src="http://placehold.it/190x190"&gt;
     &lt;h1&gt;Sample&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="thmbnl-recent"&gt;
     &lt;img src="http://placehold.it/190x190"&gt;
     &lt;h1&gt;Sample&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="thmbnl-recent"&gt;
     &lt;img src="http://placehold.it/190x190"&gt;
     &lt;h1&gt;Sample&lt;/h1&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;button&gt;right&lt;/button&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>