How to use jQuery effects on pure JavaScript slider?

Question

i need to create pure JS slider for school project and I did, but I want to use jQuery fadeIn() or any other effect when loading next image and I'm stuck there. Please if you have any solution it would help.

window.onload=function(){

    var images=["img/slide1.png",
                "img/slide2.png",
                "img/slide3.png"],
        i=0,
        len=images.length-1,
        parent=document.getElementById('slides'),
        new_img=document.createElement('img');


        function firstImg(){
            new_img.src=images[0];
            parent.appendChild(new_img);
        }

        firstImg();


        var slideShow=function(){
            i++;

            if(i>len){
                i=0;
            }

            new_img.src=images[i];
            parent.appendChild(new_img);

            return false;           
        };
        setInterval(slideShow, 5000);
};

SOLVED! I solved the problem with putting:

$("#slides > img").fadeOut(0); // at start of function
$("#slides > img").fadeToggle(1000); // at end of function

Answer 1

You can put your jquery within javascript at any place of code where a statement ends. You just have to add jquery library before the use of jquery. like in firstimg function.

 function firstImg(){
    new_img.src=images[0];
    //your jquery code like 
    // $('.selector').click(function(){
    //    alert('jquery works');
    //})
    parent.appendChild(new_img);
 }