jquery is Resizing space between list items

jquery is Resizing space between list items

I have created a simple portfolio item for a site I am working on, with left and right buttons to move between the visible thumbnails in the portfolio. The problem is this: when I click on one of the left or right buttons used to scroll the active list items, it resizes the space between all of the thumbnails by 1 pixel per click, up to 10 clicks.

Here is the markup and my javascript:

markup
<div id="portfolio_band">
   <div id="portfolio">
      <ul class="portfolio">
         <a  class="left"><img src="images/left.png" width="65" height="65" alt="left" /></a>

         <li class="visible"><img src="thumbnails/thumb_postdoc.jpg" height="65" width="65"></li>
                  
         <li class="visible"><img src="thumbnails/thumb_letter.gif" height="65" width="65"></li>
         
         <li class="visible"><img src="thumbnails/thumb_morris.gif" height="65" width="65"></li>
         
         <li class="visible"><img src="thumbnails/thumb_ovenhot.gif" height="65" width="65"></li>
         
         <li class="visible"><img src="thumbnails/thumb_poly.gif" height="65" width="65"></li>
         
         <li class="visible"><img src="thumbnails/thumb_videocraft.gif" height="65" width="65"></li>
            
         <li class="visible"><img src="thumbnails/thumb_thousand.jpg" height="65" width="65"></li>
         
         <li class="visible"><img src="thumbnails/thumb_jeri.jpg" height="65" width="65"></li>
         
         <li class="visible"><img src="thumbnails/thumb_alaskalodge.jpg" height="65" width="65"></li>
         
         <li class="visible"><img src="thumbnails/thumb_teammba.jpg" height="65" width="65" class=""></li>
         
         <li><img src="thumbnails/thumb_tennis.jpg" height="65" width="65" class=""></li>
         
         <li><img src="thumbnails/thumb_vedic.jpg" height="65" width="65" class=""></li>
         
         <li><img src="thumbnails/thumb_tti.jpg" height="65" width="65" class=""></li>
         
         <li><img src="thumbnails/thumb_branson.jpg" height="65" width="65" class=""></li>

         <a class="right"><img src="images/right.png" width="65" height="65" alt="right" /></a>
      </ul>
      
      <h3>click an image to view our small business website design portfolio</h3>
   </div>
</div>



javascript
$('ul.portfolio li:gt(9)').addClass('hidden');

$('a.left').click(function() {
   $('ul.portfolio li.visible:first').removeClass('visible').addClass('hidden').insertAfter('ul.portfolio li.hidden:last');
   $('li.hidden:first').addClass('visible').removeClass('hidden');
});

$('a.right').click(function() {
   $('li.hidden:last').addClass('visible').removeClass('hidden').insertBefore('ul.portfolio li.visible:first');
   $('ul.portfolio li.visible:last').removeClass('visible').addClass('hidden');
});


any solutions you can find would be greatly appreciated! let me know if you need to see the css or anything else.

thanks,

chris truett