animation isn't smooth in ie

animation isn't smooth in ie

Hi
I am new to jQuery - and I am stuck. I have made a simple slide show - you can see it here http://www.en2krew.com/clothing.html  
 
In just about everything it looks nice and smooth. However, in IE 7 and 8 (but not 9 apparently) it kind of jitters as the photos move. Maybe this is as good as I can expect - but I doubt it! I wohndered if it was sometihng to do with margins/padding. I tried removing them all, but the transitions still didn't look smooth to me.
 
I wouldn't normally post all the code - but I am really quite lost!
 
ANy help greatfully received.
 
thanks
 
Edward
 
Here's html
  1. <div id="slideShowWindow">
      <div id="slideShowInner">   
      <img src="images/clothes001.gif" alt="" width="350" height="350" />
      <img src="images/clothes002.gif" alt="" width="350" height="350" />
      <img src="images/clothes003.gif" alt="" width="350" height="350" />
      <img src="images/clothes004.gif" alt="" width="350" height="350" />
      </div>
     
    <div id="buttons">
    <img id="clickPrev" src="images/prevButton.jpg" height="17" width="15" /> 
    <img id="clickNext" src="images/nextButton.jpg" height="17" width="15" />
    <div id="pauseHolder">
    <img class="clickMe" id="clickPause" src="images/pauseButton.jpg" height="17" width="15" />
    </div>
    <div class="clearer"></div>
    <!-- buttons--></div>
    </div>















Here's the css:
 
  1. #slideShowWindow {
     /* this has a width of one photo  */
    width: 350px;
    position:relative;
    margin:100px auto;
    padding:10px 10px 20px 10px;
    overflow:hidden;
    border:1px solid #aaa;
    }







  2. #slideShowInner {
     /*this is a long, strip containing all the images slide by side*/
     height:350px;
     position:relative;
     top:0; left:0;
    }




  4. #slideShowInner img {
     float:left;
    margin-right:20px; /*sum of slideShowWindow padding left and right*/
    }


 
Here's the jQuery
// JavaScript Document
 
  1. $(document).ready(function() {
      // set the slideShowInner stip to the  width of all the images in a line
      // width of image
      var slidetime = 3000;
      var imageWidth = parseInt($('#slideShowInner img:first').css('width')); 
      var imageMargin = parseInt($('#slideShowInner img:first').css('margin-right'));
      var totalWidth=$('#slideShowInner img').length*(imageWidth+imageMargin);
      var oneImageTotalWidth =imageWidth+imageMargin;






  2.   $('#slideShowInner').css('width',totalWidth); 
      // this is the width of one image with its margin - and the visible window
      var widthOfDisplay = imageMargin+parseInt($('#slideShowWindow').css('width'));
      var autoSlide= setTimeout(fred, slidetime);
      $('#clickNext').click(function() { 
       showPauseButton();
       var currentPos = Math.abs(parseInt($('#slideShowInner').css('left') ));
       // pxToMove is the how much of the stip left that we WANT to move. So if its 0 it means we are on the last slide so we whizz back to the start and we need to pass to the moveSlide back to start.
       var pxToMove = totalWidth - currentPos - (imageWidth+imageMargin);
       moveSlide(widthOfDisplay, pxToMove, this.id);
       }
      )










  3.   
      $('#clickPrev').click(function() { 
         showPauseButton();
         var currentPos = Math.abs(parseInt($('#slideShowInner').css('left') ));
         var pxToMove = currentPos;
         moveSlide(-1*widthOfDisplay, pxToMove, this.id);
         }
       )






  5.   $('#clickPause').click(function(){
       if ($(this).is(':visible')){
        $(this).hide();
        clearTimeout(autoSlide);
       }
       }
      )






  6.  function showPauseButton(){
      $('#clickPause').show(); 
     }


  7.  
     function moveSlide(wod, pxTM, btnClicked){
      clearTimeout(autoSlide); 
       if (pxTM>0){ // then its a one step move
        $('#slideShowInner').stop(true,true).animate({'left':'-=' + wod}, 'slow', function (){ autoSlide = setTimeout(fred, slidetime) });
       }




  8.    if (pxTM<=imageWidth && btnClicked=="clickNext"){
         // move back to start
         $('#slideShowInner').stop(true,true).animate({'left':0}, 'slow', function() { autoSlide = setTimeout(fred, slidetime) });
       }


  9.    if (pxTM<=imageWidth && btnClicked=="clickPrev"){
        // need to whizz to show the very last slide - ie move the
        var toMove = totalWidth + wod; // its + and not negative due to the -1 in the ('#clickPrev').click function
        $('#slideShowInner').stop(true,true).animate({'left':-toMove}, 'slow', function() { autoSlide = setTimeout(fred, slidetime) });
       }
     }




  10.  
  11.  function fred(){
      clearTimeout(autoSlide);
      // find distance left to move
      var dlto = totalWidth-Math.abs(parseInt($('#slideShowInner').css('left') ))
      if (dlto>oneImageTotalWidth){ // ok to move one picture forwards
       $('#slideShowInner').stop(true,true).animate({'left':'-=' + widthOfDisplay}, 'slow');
      }else{ // need to whizz back to the start
       $('#slideShowInner').stop(true,true).animate({'left':0}, 'slow');
      }
      autoSlide = setTimeout(fred, slidetime);
     }









  12.  
  13. }) // document ready function