jQuery slideshow Misbehaving

http://dev.taragee.com/LTI/retouching/

Every开发者_运维问答 time the script switches between images, it pushes the previous down. Is there a way I can prevent this?

---

This is your code:

$(function(){
    $('.fadein div:gt(0)').hide();
    setInterval(function(){
      $('.fadein div:first-child').fadeOut()
         .next('div').fadeIn()
         .end().appendTo('.fadein');}, 
      6000);
});

FadeIn and FadeOut are Ajax calls that can be run simultaneously. In your case, that's what is happening:

Pic 1 FadeOut Start
Pic 2 FadeIn Begin
Move Pic 1 to the end of the list (still visible, see a jump)
Pic 1 FadeOut End (now invisible)
Pic 2 FadeIn End (now visible)

I'm not entirely sure what behavior you're looking for, but I'm guessing you want to use the FadeOut/FadeIn callback mechanism that is run when the animation is complete. For example:

   $(function(){
    $('.fadein div:gt(0)').hide();
    setInterval(function(){
      $('.fadein div:first-child').fadeOut(function() {
                 $('.fadein div:first-child').appendTo('.fadein'); // Move to end
                 $('.fadein div:first-child').fadeIn(); // Fade In new first image
              }
           );
          }, 6000);
});

That will wait until the first-child is finished fadingOut, THEN it will bump him to the end and fadeIn the new first-child. These selectors are not the most efficient; there's probably a better way to do it.