Question

I’m working on a slide show, and I want to be able have a jquery each() loop work through each iteration and animate each image in sequence.

I have the following code: which on the click of the image with id ‘back’, should start fading each image in sequence. Unfortunately, it fades all of the images at once.

Note: the elements are stacked on top of each other via z-index. It appears to work in JSfiddle, but I have tested it in firefox, and it just grabs all of the correct elements at once and performs the action instead of fading them out in sequence.

$(document).ready(function () {
    $('img#back').click(function () {
        $('span').each(function (index) {
            $(this).delay(1000 * index).fadeTo('slow', 0);
        });
    });
});

Answer 1

It was the order in which I had the divs in the markup, which translated to the order in which JQuery was performing the operations. My css z-index values were not in accordance with this, and It appeared to move them all at once. It was in fact moving the others in the right html order, but the wrong z-index order. In order to have it work with something like:

<div  id="safety" class="slide"></div>
<div  id="part" class="slide"></div>
<div id="inspection"  class="slide"></div>

The z-index values must correspond as follows in order to perform correctly: #safety : z-index:3, #part : z-index:2,#inspection : z-index:1