Jednoduché jQuery Slideshow Image Sťahovanie smerom nadol pre Split Second - jquery, html, slideshow

Mám tu tento kód pre jednoduchú prezentáciu:

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

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

Tu je môj text HTML:

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

</div>

A tu je pracovná úloha: http://jsfiddle.net/shrimpboyho/9n9GK/

Všimnite si však, že keď sa obrázky zmenia, môžete vidieť, že predchádzajúci obrázok vybledol a posunul sa nadol skôr, ako úplne zmizol?

To je pre mňa problém, pretože prezentáciamusí byť umiestnený nad odsekom textu a obrázok bliká v texte, keď sa obrázky menia a je nepríjemné. Existujú nejaké spôsoby, ako to vyriešiť.

odpovede:

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

pracuje táto maximálna výška, ak áno, skúste toto:

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

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

obrázky sa tak umiestnia na seba.