Simple jQuery Slideshow Image Moving Downwards for a Split Second

问题

So I have this code here for a simple slideshow:

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(100)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

Here is my HTML div:

<div style= "display:block;max-height: 210px;" id="slideshow">
   <div>
     <img src="https://lh5.googleusercontent.com/-hmenNgmckUY/UMYwzUQNdrI/AAAAAAAAB0Y/Z__BD-lxgYo/s912/gears.JPG">
   </div>
   <div>
     <img src="https://lh6.googleusercontent.com/-Xn464dhgk6g/UNTgxgKrbvI/AAAAAAAAAwA/2omVTkLCjSE/s928/didy%2520site%25201.JPG">
   </div>

</div>

And here is a working fiddle: http://jsfiddle.net/shrimpboyho/9n9GK/

However, notice that when the pictures change you can see the previous image fade and move downwards before completely disappearing?

This is a problem for me because the slideshow needs to be placed above a paragraph of text, and the picture flashes on the text as the pictures change and it is annoying. Are there any ways I can fix this.

回答1:

<div style= "display:block;max-height: 210px;" id="slideshow">

is this max-height actually working, if yes, try this:

 <div style= "display:block;max-height: 210px; overflow:hidden;" id="slideshow">

回答2:

#slideshow {
    position: relative;
}
#slideshow > div {
    position: absolute;
    top: 0;
    left: 0;
}

this will place the images on top of each other.

来源：https://stackoverflow.com/questions/14968715/simple-jquery-slideshow-image-moving-downwards-for-a-split-second