jquery: Crossfade instead of fadeOut then fadeIn

Question

I've created my own image/div slider from a tutorial on youtube and it works the way it should based on the code, however, I noticed that since they use the fadeOut() then fadeIn() commands, a white flash appears (because the background is white) in between the fades. Is there anyway someone can add something to the code to make it so that it Crossfades instead? What I mean is that the next image fades in but the previous image doesnt disappear yet, but still loops? Here's the code:

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {

    startSlider();

});

function startSlider() {

    count = $("#slider > .bg").size();

    loop = setInterval(function() {

        if(sliderNext > count) {
            sliderNext = 1;
            sliderInt = 1;
        }

        $("#slider > .bg").fadeOut(300);
        $("#slider > .bg#" + sliderNext).fadeIn(300);     

        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;

    }, 6000);

}

Answer 1

Cross fading is done by fading in while already having an image below the faded in image.

sliderNext = 1;

$(document).ready(function() {    
  startSlider();    
});

var to_img;

function startSlider() {

    count = $("#slider > .bg").size();

    loop = setInterval(function() {

        if(sliderNext > count) {
            sliderNext = 1;
        }

        $("#slider > .bg").css('z-index', 0);

        if (to_img != null)
          to_img.css('z-index', 1)

        to_img = $("#slider > .bg#" + sliderNext);
        to_img.css('opacity', 0).css('z-index', 2).fadeIn(300);

        sliderNext = sliderNext + 1;

    }, 6000);

}