jQuery slideshow does not fade simultaneously

Question

I have made a jQuery plugin which acts as a slideshow. All of my problem is that it does fades out first, and then the next images fades in. Which is a little odd. I have thought all the day and am really beat about it. Can anyone helps me? Here is the info:

Below is a list of websites with current slideshow hosted:

http://behdis.org

www.ms-models.com

www.royal-fci.com

Now, PROBLEM is:

there are naturally a bunch of images for the slideshow to fade them in and out. Now, the slideshow makes the first image faded out and then makes the next image faded in. I want the slideshow to begin fading in the next image when the current image has already begun fading out. Just like hundreds of slideshows out there on many websites. No need to give link.

Here is the plugin script itself:

(function(){

     /*  function read_line (path_to_file, container, tag, url_prefix)
        {
            myObject = {}; //myObject[numberline] = "textEachLine";
            $.get(, functipath_to_fileon(myContentFile) {
            var lines = myContentFile.split("\r\n");

                    for(var i  in lines)
                    {                         
                          myObject[i] = i;
                          container.append('<'+tag+'>'+"<img src='"+url_prefix+'/'+lines[i]+"'>"+'</img>'+'</'+tag+'>');
                   }      
           }, 'text');// end of anonymous function   
      } */
        $.fn.mtSlideGallery = function(options){
            var options = $.extend({
                fullWidth : false,  // this makes a full background slideshow
                FadeIn : 2,  // this is the duration of fading in
                FadeOut : 2, // this is the duration of fading out
                visibilityDuration : 2, //  this is the duration of visible image
                startSlide : 1, // this is the first slide when the page loads
                height : '100%',
                height_fixed : true,
                enable_error : false,
                enable_gallery : false,
                slide_previous : '.slide-left-control', // this is the name of class for previous-picture-handle
                slide_next : '.slide-right-control', // this is the name of class for next-picture-handle 
                print_output : false,
                print_area : '.slideshow-label',
                seo_campatible : false, // this allows the script to print the title of each slide out into a h1-h6 tag
                seo_suggestion : 'h2' // this allows the user to specify which h1-h6 tag be used. default is h6
                /*auto_generate_from_file : false, // if true, then it will generate the div tag based on a file given
                auto_generate_url : false, // if true, then a url_prefix is added to each line of text
                auto_generate_tag : 'div', // the tag inside which the image tags nest. default is div and it is recommended no to change
                auto_generate_url_prefix : "" // this is the url added to each image address.  Depends on auto_generate_url options*/
            }, options)

        // develope $fn protype        
           return this.each(function(){                         

              if(options.print_output === true)
              {
                var text_for_output = $(this).children('div').eq(options.startSlide).children('img').attr('alt');   
                $(options.print_area).text(text_for_output);              
              }

              if(options.fullWidth === true)
              {
                    $("body").css({'padding' : '0', 'margin' : '0'}); 
                    $("body").css({'overflow' : 'hidden'});  
                    $("html").css({'padding' : '0', 'margin' : '0'});  
                    $(this).css({'width' : '100%', 'height' : options.height});
                    $(this).css({'margin' : '0', 'padding' : '0'});                                         
              }
              if(options.height_fixed === true)
              {
                    $(this).css({'overflow' : 'hidden'});  
              }
              var slideWrapper = $(this);
              var slidesGroup = slideWrapper.children('div');
              slidesLength = slidesGroup.length;
              if(options.enable_error == true)
              {
                      if(options.startSlide > slidesLength)
                        {
                            alert("Please correct the \"slideStart\" option. The number has to be less than the total number of images.")

                }

                }
              i = options.startSlide;
              slidesGroup.not(":eq("+i+")").hide();       
              console.log(slidesLength);
////////////////////// Print To label if true

    var print_label = function(i)
    {
        var label = slidesGroup.eq(i).children('img').attr('alt');  
        $(options.print_area).text(label);
    }
    ;
///////////////////// End of printing label 


//////////////// GALLERY SLIDESHOW IF ENABLED USES THIS SCRIPT  
if(options.enable_gallery === true)
{         
              $(options.slide_previous).click(function(event){ // this is a click event for the previous picture in the queue
                              event.preventDefault();   
                              event.stopPropagation();                        
                              slidesGroup.eq(i).hide();                           
                              if(i === slidesLength)
                                  {
                                      i=0;
                                  }
                              i -= 1;                             
                              slidesGroup.eq(i).show();
                              if(options.print_output === true)
                              {
                                  print_label(i);
                              }
                          });
            $(options.slide_next).click(function(event){ // this is a click event for the next picture in the queue
                event.preventDefault();
                event.stopPropagation();
                slidesGroup.eq(i).hide();                             
                if(i === slidesLength)
                    {
                        i=0;
                    }
                i += 1;                           
                slidesGroup.eq(i).show();
                if(options.print_output === true)
                              {
                                  print_label(i);
                              }
            });
}
////////////////////// END OF GALLERY-ENABLED SCRIPT    


////////////////////////////////////////////////////////        
              var slideShow = function () {                                               
                          slidesGroup.eq(i).fadeOut(options.FadeOut*1000, function(){
                             slidesGroup.eq(i).hide();
                            i += 1;
                              if(i === slidesLength)
                                  {
                                      i=0;
                                  }
                                  slidesGroup.eq(i).fadeIn(options.FadeIn*1000);                                 
                                  if(options.print_output === true)
                              {
                                  print_label(i);
                              }
                          })                    
            }
              setInterval(slideShow, options.visibilityDuration*1000);

           })                
            }
})(jQuery)

Answer 1

Now, the slideshow makes the first image faded out and then makes the next image faded in. I want the slideshow to begin fading in the next image when the current image has already begun fading out.

The issue here is that the call to fade in the next slide is part of an anonymous callback function that does not fire until the initial jQuery animation is complete. You'll want to rewrite your code such that the $.fadeOut() and $.fadeIn() functions occur simultaneously:

var transition = function() {
    //Determine the index of the next slide to show, based on the current index
    var next_index = (current_index < slidesLength - 1) ? current_index + 1 : 0;
    //Fade out the 'old' slide while fading in the 'new' slide
    slidesGroup.eq(current_index).fadeOut({
        duration: options.FadeOut*1000,
        start: function() {
            slidesGroup.eq(next_index).fadeIn({
                duration: options.FadeIn*1000
            });
        },
        complete: function() {
            //Update the value of current_index
            current_index = next_index;
        }
    });
}

However, this function pretty much restricts you to forward-only transitions. You could include a function argument that specifies a transition direction (forward and backward) that will determine the 'next slide' index.

Working jsFiddle: http://jsfiddle.net/gh25s/

EDIT: To clarify, you'll want to replace this part of your code:

var slideShow = function () {                                               
    slidesGroup.eq(i).fadeOut(options.FadeOut*1000, function(){
        slidesGroup.eq(i).hide();
        i += 1;
        if(i === slidesLength) {
              i=0;
        }
        slidesGroup.eq(i).fadeIn(options.FadeIn*1000);                                 
        if(options.print_output === true) {
          print_label(i);
        }
    });                    
};

with this:

var slideShow = function() {
    //Determine the index of the next slide to show, based on the current index
    var next_index = (i < slidesLength - 1) ? i + 1 : 0;
    //Fade out the 'old' slide while fading in the 'new' slide
    slidesGroup.eq(i).fadeOut({
        duration: options.FadeOut*1000,
        start: function() {
            slidesGroup.eq(next_index).fadeIn({
                duration: options.FadeIn*1000
            });
        },
        complete: function() {
            //Update the value of i
            i = next_index;
        }
    });
}

Also, using the variable name i throughout your code is confusing. I would suggest giving it a more meaningful, descriptive name like current_index. Variable names like i are typically read as temporary, local variables that are being used for some kind of iteration.