javascript - JavaScript を使用して異なる画像にフェードする複数のタイルを作成する

Question

私は Web プロジェクトに取り組んでおり、3x2 列のタイルを作成したいと考えています。マウスをその上に置くと、タイルがフェードアウトし、画像を含む新しいタイルでフェードインします。

DIV クラスを使用した画像である複数のタイルがあります.previewBox。これらの画像にマウスを合わせると、JQuery を使用して画像をフェードアウトし、新しい画像でフェードインします (JavaScript で画像をロードするために特別に調整された waitForImages という JQuery プラグインを使用します)。別の画像のセット。最初の画像セット (プレビュー画像) をすべて配列に入れ、2 番目の画像セット (フリップ画像) を別の配列に入れることを考えました。 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");
                });
            };
        });
    });
});