title: jQuery Horizontal Scroll Animation
body: <p>This is probably a very basic question and it's because I'm such a noob to jQuery that I don't know this. </p>
  
  <p>I have a wide web site with all content laid out horizontally. Instead of using a scroll bar at the bottom I have a button on either side so that when you click it, it moves you left or right in the site.</p>
  
  <p>I have the jQuery here:</p>
  
  <pre><code>$(".timeline_page a.flex-prev").click(function(){
  $(".timeline_page_wrapper").scrollLeft(Math.max(0, $(".timeline_page_wrapper").scrollLeft() - 500));
  });
  
  $(".timeline_page a.flex-next").click(function(){
  $(".timeline_page_wrapper").scrollLeft(Math.min(1200, $(".timeline_page_wrapper").scrollLeft() + 500));
  });
  </code></pre>
  
  <p>So far so good. But I would like to animate it and I can't figure out how to do so. Everything I try causes it not to run. </p>
  
  <p>On a related note is there a way for me to know when the user is at the end of the right or left side so I can change the button state?</p>
  
  <p>EDIT:</p>
  
  <p>Ok so now I've got the following code and managed to animate it. But what am I doing wrong with adding or removing a class if it reaches a certain point?</p>
  
  <pre><code>$(".timeline_page a.flex-prev").click(function(){
  $(".timeline_page_wrapper").animate({
      scrollLeft: Math.max(0, $(".timeline_page_wrapper").scrollLeft() - 500)}, 650);
  });
  
  $(".timeline_page a.flex-next").click(function(){
  $(".timeline_page_wrapper").animate({
      scrollLeft: Math.min(4080, $(".timeline_page_wrapper").scrollLeft() + 500)}, 650);
  });
  
  if ($(".timeline_page_wrapper").scrollLeft() === 0 {
      $(".timeline_page a.flex-prev").addClass("flex-disabled");
  } else {
      $(".timeline_page a.flex-prev").removeClass("flex-disabled");
  }
  );
  
  });
  </code></pre>