I'm a student learning javascript and jQuery. I have a javascript gallery that is fully functional, but am required to put a jQuery fade inbetween the images as they flick through. I can not figure out how to select my javascript images through jquery. Any help would be appreciated. 

this is my java script

var images = $([]);

var x = $(0);

//reference to pictures, that i want to show and giving them an order number

images[0] = "images/1.jpg";

images[1] = "images/2.jpg";

images[2] = "images/3.jpg";

images[3] = "images/4.jpg";

images[4] = "images/5.jpg";

images[5] = "images/6.jpg";

var caption = [];

//captions I want to show with order number which is the same as the pictures

caption[0]="Young Fan shows off a warriors tattoo on both checks";

caption[1]="Baby keeps warm in warriors bennie";

caption[2]="Young girl watches game, with butterfly facepaint";

caption[3]="young league player is excited to be part of the guard of honor";

caption[4]="Fan watches the game from the south stand";

caption[5]="young league player waits on sideline to be part of the guard of honor";

var si;

var myVar;

window.onload = function(){

document.getElementById("button").onclick = stopFunc ;

document.getElementById("play").onclick = playFunc ;

//link to play, pause buttons and instructions to activate 

function changeImage(number){

    document.getElementById("showingImage").src = images[number]; 

document.getElementById("cap").innerHTML = caption[number]; 

}

//telling code to change picture, but not how to change

function nextFunc(){ //letting code know how to change

x++;//x=0 so which is the first pic, continue to go to next pic

if(x>=6){//if picture is on the last pic

x=0;//go to pic one

changeImage(x);//reference to change 

}else{

changeImage(x);

}

}

function playFunc(){

clearInterval(myVar); //clear before play so it doesn't double in speed

myVar= setInterval(nextFunc, 2000);//change pictures every 2 seconds, use next func so it goes to next pic

}

playFunc(); //calling function