title: Jquery Horizontal Scroll on Click
body: <p>I am trying to get this horizontal section of the page to auto scroll when the left or right arrows are clicked.  I can get the Jquery code to run correctly in the console.  However, the auto scroll events won't run at all on my page.  Could anyone provide any insight into this issue?</p>
  
  <p>The code is as follows :</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class = "horizon horizon-prev"&gt;
        &lt;img src = "../images/left-arrow.png" /&gt;
      &lt;/div&gt;
      &lt;div class = "horizon horizon-next"&gt;
        &lt;img src = "../images/right-arrow.png" /&gt;
      &lt;/div&gt;
  
    &lt;div class="center" id="content"&gt;
        &lt;div class=internal&gt;
          div 1
        &lt;/div&gt;
         &lt;div class=internal&gt;
          div 2
        &lt;/div&gt;
         &lt;div class=internal&gt;
          div 3
        &lt;/div&gt;
         &lt;div class=internal&gt;
          div 4
        &lt;/div&gt;
         &lt;div class=internal&gt;
          div 5
        &lt;/div&gt;
         &lt;div class=internal&gt;
          div 6
        &lt;/div&gt;
         &lt;div class=internal&gt;
          div 7
        &lt;/div&gt;
         &lt;div class=internal&gt;
          div 8
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div.center {
   width: 90%;
   height: 210px;
   border: 1px solid #000;
   margin: auto;
   overflow-x: hidden;
   overflow-y: hidden;
   white-space: nowrap;
    }
    div.internal {
     display: inline-block;
     vertical-align: middle;
     width: 100%;
     text-align: center;
    }
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>$('.horizon-prev').click(function() {
    event.preventDefault();
    $('#content').animate({
      scrollLeft: "-=775px"
    }, "slow");
  });
  
   $('.horizon-next').click(function() {
    event.preventDefault();
    $('#content').animate({
     scrollLeft: "+=775px"
    }, "slow");
  });
  </code></pre>