title: Incremental background position animation with jQuery
body: <p>I've got a 100% wide and 284px high div called #photoStripe with a 5000px wide background image. Then left and right nav buttons over it. The idea is to be able to pan left an right, by animating the background image incrementally left and right. </p>
  
  <p>I'm using the <a href="http://www.protofunc.com/scripts/jquery/backgroundPosition/" rel="nofollow">popular background position plugin</a>, which allows you to animate the x and y values of the background position simultaneously.</p>
  
  <p>Well, the background animates, but it only does once. (Can't click again and again).Any ideas?</p>
  
  <p>jQuery:</p>
  
  <pre><code>$('#photoStripe').css({backgroundPosition:"0 0"});
  
  $('a.moveLeft').click(function(){
      $('#photoStripe').stop().animate({backgroundPosition:'-=200px 0'}, {duration:500});
  });
  $('a.moveRight').click(function(){
      $('#photoStripe').stop().animate({backgroundPosition:'+=200px 0'}, {duration:500});
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#photoStripe {
  width:100%;
  height:286px;
  text-align:center;
  overflow:hidden;
  background:url(../_images/photo_stripe.jpg);
  }
  </code></pre>