Question

I wanna to improve this chunk of code to make each image appears independently and doing the fade out.

This one face a problem , which is iterating quickly , so only the last image is appeared and doing the fade out.

jQuery.each(
slidesArray, function (index, value) {

   var linkHref = value[1];
   var imageSource = value[0];;


   $("#slider").html("<a href='" + linkHref + "'><img src='" +
                     imageSource + "'></a>").fadeOut(5000);

});

Can you help me ? note that images should be animated respectively.

Answer 1

Here’s a little jQuery plugin that will help:

jQuery.slowEach = function( array, interval, callback ) {
    if( ! array.length ) return;
    var i = 0;
    next();
    function next() {
        if( callback.call( array[i], i, array[i] ) !== false )
            if( ++i < array.length )
                setTimeout( next, interval );
    }
};
jQuery.fn.slowEach = function( interval, callback ) {
    jQuery.slowEach( this, interval, callback );
};

Include the plugin above. It adds a slowEach method and function: $(...).slowEach(interval,callback) and $.slowEach(interval,delay,callback). It iterates over an object or jQuery selection, waiting for delay milliseconds after each iteration.
Edit your code from above to use slowEach:

jQuery.slowEach(
slidesArray, 5000, function (index, value) {
  var linkHref = value[1];
  var imageSource = value[0];
   $("#slider").html("<a href='" + linkHref + "'><img src='" + imageSource + "'></a>").fadeOut(5000);
});