创建使用javascript淡入不同图像的多个图块

Question

我正在开发一个网络项目，我想制作一个3x2的瓷砖行，当你将鼠标放在它们上面时，瓷砖会淡出并淡入一个包含图像的新瓷砖。

我有多个图块是使用DIV类.previewBox的图像。当你将鼠标悬停在这些图像上时，我使用JQuery淡出图像并重新使用新图像（使用一个名为waitForImages的JQuery插件，专门用于在JavaScript中加载图像）问题是我希望每个图块都褪色不同的图像集。我想把所有第一组图像（预览图像）放在一个数组中，第二组图像（翻转图像）放在一个不同的数组中，当你鼠标悬停时，它会想要设置翻转图像调用flipArray.indexOf（this），但由于JavaScript正在检测div，我不确定这是否可行，因为“this”不是指数组中的图像。

我仍然在学习javascript，我不确定如何检测你正在悬停的图像并将其索引号用另一张图片切换出来。

我有用于淡化图像的脚本，但现在我的图像位置是硬编码的。

$(document).ready(function() {
    //Document is ready to load
    var hov = false;
    //Since there is more then one tile using the .previewBox I use the .each command
    $('.previewBox').each(function() {
        var previewBox = $(this); // Won't create as many objects this way.
        previewBox.mouseenter(function() // On mouse enter
        {
            if (hov === false) //Keeps animation from repeating
            {
                hov = true; // Sets boolean for mouse leave
                previewBox.fadeOut(function() //Fades out
                {
                    previewBox.waitForImages(function() //Loads images
                    {
                        previewBox.stop().fadeIn(); //Fades in
                    });
                    previewBox.attr("src", "Images/Portfolio/Art_Bike_Flip.png"); //New image location. 
                });
            };
        });
    });
    $('.previewBox').each(function() {
        var previewBox = $(this);
        previewBox.mouseleave(function() {
            if (hov === true) {
                hov = false;
                previewBox.fadeOut(function() {
                    previewBox.waitForImages(function() {
                        previewBox.stop().fadeIn();
                    });
                    previewBox.attr("src", "Images/Portfolio/Art_Bike_Preview.png");
                });
            };
        });
    });
});