Search jQuery

jQuery Forum

animation isn't smooth in ie

in Using jQuery • 12 years ago

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

<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>
</div>
</div>

Here's the css:

#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;
}
#slideShowInner {
/*this is a long, strip containing all the images slide by side*/
height:350px;
position:relative;
top:0; left:0;
}
#slideShowInner img {
float:left;
margin-right:20px; /*sum of slideShowWindow padding left and right*/
}

Here's the jQuery

// JavaScript Document

$(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;
  $('#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);
   }
  )
  $('#clickPrev').click(function() {
     showPauseButton();
     var currentPos = Math.abs(parseInt($('#slideShowInner').css('left') ));
     var pxToMove = currentPos;
     moveSlide(-1*widthOfDisplay, pxToMove, this.id);
     }
   )
  $('#clickPause').click(function(){
   if ($(this).is(':visible')){
    $(this).hide();
    clearTimeout(autoSlide);
   }
   }
  )
function showPauseButton(){
$('#clickPause').show();
}
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) });
   }
   if (pxTM<=imageWidth && btnClicked=="clickNext"){
   // move back to start
   $('#slideShowInner').stop(true,true).animate({'left':0}, 'slow', function() { autoSlide = setTimeout(fred, slidetime) });
   }
   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) });
   }
}
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);
}
}) // document ready function

Response title

Attachments

jQuery Forum

animation isn't smooth in ie

Statistics

Tags

Actions