如何交叉淡化图像

Question

我有一个工作脚本可以将一个图像淡入淡出，然后再淡出，然后是下一个图像，然后输出等等。

我的目标是在淡出时将下一个图像交叉淡入当前图像，但是当我调用.attr（“src”）时，它会突然中断淡出并在下一个图像中淡入淡出。

有什么想法吗？

代码：

var aImages = new Array();
var iPrev = -1;
var iRnd = -1;

aImages[0] = "images/image1.jpg";
aImages[1] = "images/image2.jpg";

$(document).ready(function() {

    $("img#bg").load(function()
        {
            $("img#bg").fadeTo(3000,1);

            setTimeout(function() 
                {
                    $("img#bg").fadeOut(3000);
                    setTimeout(LoadImages,3000); // <-- when this value is decreased to attempt to crossfade them it messes up
                }
                ,5000);
        }           
    )

    setTimeout(LoadImages,0);

});

function LoadImage(iNr)
{
    $("img#bg").attr("src", aImages[iNr]);

};

function LoadImages()
{
    while(iPrev == iRnd)
    {
        iRnd = Math.floor(Math.random()*aImages.length);
    }

    LoadImage(iRnd);

    iPrev = iRnd;

};