How can I add a fade event to my simple javascript image array?

Question

I have a simple image array for my website : a javascript code triggered by links in my html.

The javascript is working fine but I can't seem to get the images in fadeIn when the image switches. The switch is always abrupt painful for the eyes.

Could someone please explain how I might get a fadeIn event or effect going with this image array?

Here is the javascript:

var Image = new Array("ONE.jpg","TWO.jpg","THREE.jpg","FOUR.jpg");

var Image_Number = 0; var Image_Length = Image.length - 1;

function change_image(num){

Image_Number = Image_Number + num;

if (Image_Number>Image_Length){

    Image_Number = 0;
}
if (Image_Number<0){

    Image_Number = Image_Length;
}
if (Image_Number>0){ function fade_in () {

$("Image_Number") .fadeIn();
}


document.my_imagearray.src= Image[Image_Number];

return false;
}

And the html:

Answer 1

Seems you forgot to add the html code

From the code you have provided, I can only assume you should write this:

if ( Image_Number > 0 ) {
    $("html_item_that_contains_image").fadeOut();
    document.my_imagearray.src = Image[Image_Number];
    $("html_item_that_contains_image").fadeIn();
}