title: Animating a box to meet at a calculated width
body: <p>I'll be honest, I've patched together code from a couple of sources without really knowing how it works and I've confused the hell out of myself.</p>
  
  <p>I have a series of images in a div (.projectImages) and I want to calculate the combined width of them then pass that value on to the animation so that it moves the images along by ther combined width.</p>
  
  <p>Here's my frankenstein code:</p>
  
  <pre><code>function calcWidth() {
      var imgwidth = 0;
      $(".projectImages").find("img").each(function(){
          imgwidth += $(this).width();
      });
      return imgwidth;
  }
  
  
  $(function(){   
      $("#rightArrow").hover(function() {
          $('.projectImages').animate({left: imgwidth +'px'}, 3000);
      },function() {
          $('.projectImages').stop();
      });
  });
  </code></pre>
  
  <p>I'm fairly sure the problem is in calculating the widths but as I said this code is a copy and paste job so I'm not really sure how it's working.</p>
  
  <p>Fairly new to jQuery but I'm getting there slowly.</p>