使用Javascript从图像到图像（不是从图像到白色到图像）的淡入

我有一个“幻灯片”类型的功能，其中图像彼此淡入淡出。它工作正常，但当它淡出时，第一张图片淡出为白色，然后第二张图片淡入。我想要的是第一张图像淡入第二张（中间没有空白的白色背景）。我能做这个吗

以下是一个例子：

图像

<img id="image1" src="http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg" style="width: 100%;">

编辑：“我可以这样做吗？”-不可以。不能只使用一个图像元素

你基本上需要的是两张图片，一张在另一张上面

我编辑了你的小提琴，效果很好：

因此，基本上我添加了另一个img元素，并将图像的位置设置为绝对位置（因此它们是重叠的）

我更新了javascript内容，以便在fadeIn和fadeOut“事件”中更改图像。原理是上面的图像淡出淡入。当它不可见时，更改它的src。当它是可见的，你改变底部图像的src

---

我现在想不出更好的解决办法了。希望这有帮助

我计划使用内嵌块在图像网格中执行此操作。当我对图像使用position:absolute时，它不适合。示例：这应该有一个由8只狗和一只猫组成的网格，但是猫（其位置是绝对的）与狗重叠。知道为什么吗？如果知道图像尺寸，可以相对定位覆盖图像（将其顶部位置设置为“-{it's height}”，并为保存图像的div设置负的底部边距）

var curIndex = 0;
var src = ['/images/IMG_20140907_203614.jpg', 'http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg', 'http://cvcl.mit.edu/hybrid/cat2.jpg'];
var fadeTimeInMilliseconds = 2000;
var waitTimeInMilliseconds = 1000;

$(document).ready(function(){
    switchImageAndWait(true);
});

function switchImageAndWait(fadeOut2){
    if(fadeOut2){
        setTimeout(fadeOut, waitTimeInMilliseconds);
    }else{
        var index = Math.floor((Math.random()*src.length))
        if(curIndex == index){
            index++;
            if(index >= src.length){
                index-=2;
            }
        }
        curIndex = index;
        $("#image1").attr("src", src[index]);
        fadeIn();
    }
}

function fadeOut(){
    $("#image1").fadeTo( fadeTimeInMilliseconds, 0 , function() { switchImageAndWait(false); });
}

function fadeIn(){
    $("#image1").fadeTo( fadeTimeInMilliseconds, 1 , function() { switchImageAndWait(true); });
}

<img id="image2" src="http://cvcl.mit.edu/hybrid/cat2.jpg" style="width: 100%;position: absolute;">