animation isn't smooth in ie

animation isn't smooth in ie

I am new to jQuery - and I am stuck. I have made a simple slide show - you can see it here  
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.
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 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 class="clearer"></div>
    <!-- buttons--></div>

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

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

  3. #slideShowInner img {
    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() { 
       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,;

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

  4.   $('#clickPause').click(function(){
       if ($(this).is(':visible')){

  5.  function showPauseButton(){

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

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

  8.    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.  function fred(){
      // 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. }) // document ready function