Question

Noob in jQuery.

I’m trying to cycle through an image gallery with the goal of having the images fade in and fade out.

Here is my JSFiddle
By clicking on #gallery each image fadeTo(arg1) and then fadeTo(args2).
But I want them to go one by one.
Perhaps a delay should be added to the chain?

Any help would be greatly appreciated.

Answer 1

jQuery animations (as most things on javascript) are asynchronous, which means that the function calls return before the action has finished. In a sense, you can think of each iteration of your $('img').each loop as following:

• jQuery calls your function with this bound to one img element
• Your function calls fade on $(this)
• jQuery then asks the browser to schedule an animation to be run
• Your function returns

Then, after all your iterations have ended the browser will start to make the animations happen on the screen, all at the same time (since all of them were scheduled).

To create a sequential behavior, you can give the fade function a callback:

$('#gallery').click(function(evt) {
  var remainingImages = $("img").toArray();

  var processNext = function() {
    var image = remainingImages.shift();
    if(!image) return;

    // Add the next iteration as a callback to the animation
    $(image).fadeTo(500, .3).fadeTo(250, 1, processNext);
  };

  processNext();
});

Then, instead of scheduling all animations at once, what happens is something like this:

• All the current img elements are stored in the remainingImages array
• The processNext function is called, which removes the first image from the array
• The function calls fade on the $(image), providing a function (that happens to be itself) that should be called after the animation is finished
• jQuery schedules the animation with the browser, and tells it to execute the function afterwards
• After the animation finishes, the next iteration is executed

Updated jsFiddle