jQuery fade function with setInterval function

Question

I'm creating simple slide with jQuery and its work fine i just want to use fade function as well with below code. I used fade function but it's working it's not fading an image while change.

var mainImage = $('#mainImage');
var imageData = ['_images/gallery/beach_houses.jpg','_images/gallery/golden_gate.jpg','_images/gallery/red_rock_01.jpg'];
var imageIndex = 0;
function imageSlide(){
    mainImage.fadeIn("slow",function(){
        mainImage.attr("src",imageData[imageIndex]);
        imageIndex++;
        if(imageIndex >= imageData.length){
          imageIndex = 0;
        }
    });
}
setInterval(imageSlide,1000);

Answer 1

You've used fadeIn already, but in order for the image fade in it has to be hidden, the easiest way is to fade it out first.

Using the fadeOut callback, you can wait for the fadeOut to complete, set the src and then fadeIn:

var mainImage = $('#mainImage');
var imageData = ['_images/gallery/beach_houses.jpg','_images/gallery/golden_gate.jpg','_images/gallery/red_rock_01.jpg'];
var imageIndex = 0;
function imageSlide() {

    // fade out before changing src
    mainImage.fadeOut("fast", function(){
        mainImage.attr("src",imageData[imageIndex]);
        imageIndex++;
        if(imageIndex >= imageData.length){
          imageIndex = 0;
        }

        // fade back in after changing src
        mainImage.fadeIn("slow");
    });
}

// Increase interval to provide enough time if needed
setInterval(imageSlide, 1000);

Note that "slow" = 600ms so 2x slow (fade out then in) will be longer than your setInterval of 1000ms and will create some crazy results.