需要帮助平滑此 JavaScript 幻灯片中的过渡

我有一个幻灯片，它是用带有文本叠加的 script.aculo.us 实现的，它在技术上是有效的，但我需要比现在更平滑的过渡。

更新：下面的JSFiddle链接。希望这能给我一些回应？

我认为这是一个CSS问题。"下一个"图像在应该淡入时淡入，但它发生在淡出的图像下方，然后弹出到位。您可以通过缩小浏览器宽度来观察这种情况的发生。由于最大高度和响应式布局，这会导致事物上下反弹。我觉得图像需要位置：绝对才能淡入正确的位置，但是我尝试添加的每种方式都会导致整个幻灯片完全消失。

CSS的

#slideshowContainer {
    position:relative;
    width:100%;
    max-height:400px;
    overflow:hidden;
}
/*.slideshow {
    position:relative;
    top:0px;
    width:100%;
} */  /*(this wasn't accomplishing anything, tried it with absolute also)*/
.slideshowImage {  /*relative = broken, absolute = invisible */
    left:0;
    top:0px;
}
.slideshowImage img { /*relative = broken, absolute = invisible */
    width:100%; 
}
.slideshowOverlay { /*this overlay works just fine, only the images are broken */
    position:absolute;
    width:100%;
    height:105px;
    bottom:0px;
    background: rgb(51, 51, 51); /* Fall-back for browsers that don't support rgba */
    background: rgba(51, 51, 51, .8);
}

这是 js：

var i = 0;          
var image_slide = new Array('image-1','image-2','image-3'); //etc...
var NumOfImages = image_slide.length;
var wait = 6000;
function SwapImage(x,y) {       
    $(image_slide[x]).appear({ duration: 2 });
    $(image_slide[y]).fade({duration: 2});
}
function StartSlideShow() {
    play = setInterval('Play()',wait);  
}
function Play() {
    var imageShow, imageHide;
    imageShow = i+1;
    imageHide = i;
    if (imageShow == NumOfImages) {
        SwapImage(0,imageHide); 
        i = 0;                  
    } else {
        SwapImage(imageShow,imageHide);         
        i++;
    }
}

这是div 的样子：

<div class="col span_3_of_3" id="slideshowContainer">
    <div id="image-1"  class="slideshow">
        <div class="slideshowImage"><img src="manage/photos/feature42.jpg"  /></div>
        <div class="slideshowOverlay">
            <div class="slideshowTitle">blah blah blah</div>
            <div class="slideshowSubTitle">blah blah blah blah blah blah</div>
            <div class="slideshowMore">...<a href="content.php?id=42">MORE</a></div>
        </div>
    </div>
    <div id="image-2"  style="display: none;"  class="slideshow">
        <div class="slideshowImage"><img src="manage/photos/feature41.jpg"  /></div>
        <div class="slideshowOverlay">
            <div class="slideshowTitle">blah blah blah</div>
            <div class="slideshowSubTitle">blah blah blah blah blah blah</div>
            <div class="slideshowMore">...<a href="content.php?id=41">MORE</a></div>
        </div>                
    </div>
</div>

等等。

奇怪的是，div的叠加部分完美地淡入淡出，只有图像才奇怪。图像淡出为纯白色，然后下一个图像弹出得太快，除了最后一个图像，由于某种原因，它向后工作。

我想要的是同时平滑的淡入淡出，没有突然的弹出，中间没有空白。并且不会在较窄的响应尺寸中上下弹跳。

下面是一个演示该行为的 JSFiddle：JSFiddle 缩小幻灯片窗口的宽度以查看实际发生的情况。

任何帮助解决这个问题将不胜感激。请记住，此页面上没有jquery，不使用jquery的解决方案将非常可取，因为我以前没有使用它并且时间有点短。