Jquery迭代不按顺序显示答案

【问题标题】：Jquery Iterations not displaying in sequenceJquery迭代不按顺序显示
【发布时间】：2013-01-20 22:23:03
【问题描述】：

我正在制作幻灯片，我希望能够让 jquery each() 循环在每次迭代中工作并按顺序为每个图像设置动画。

我有以下代码：单击 id 为“back”的图像时，应该开始按顺序淡化每个图像。不幸的是，它会同时淡化所有图像。

注意：元素通过 z-index 堆叠在一起。它似乎可以在 JSfiddle 中使用，但我已经在 firefox 中对其进行了测试，它只是一次抓取所有正确的元素并执行操作，而不是按顺序将它们淡出。

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

【问题讨论】：

它对我有用...jFiddle
您可能希望.clearQueue() 出现在某处，以防止不必要的队列堆积。
这很奇怪。我应该提一下，我将它们全部堆叠在一起，并带有 z-index。这样它就可以像幻灯片放映一样发挥作用。我已经在 Firefox 中尝试过了，它只是同时移动了它们三个......

标签： jquery iteration slideshow delay each

【解决方案1】：

这是我在标记中放置 div 的顺序，它转换为 JQuery 执行操作的顺序。我的 css z-index 值与此不符，它似乎一下子将它们全部移动了。它实际上是以正确的 html 顺序移动其他人，但错误的 z-index 顺序。为了让它与类似的东西一起工作：

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

z-index 值必须如下对应才能正确执行：#safety : z-index:3, #part : z-index:2,#inspection : z-index:1

【讨论】：

您可以在此小提琴jsfiddle.net/jNr8B 中查看工作解决方案。它不起作用的原因是 jquery 正在按照解析的顺序执行操作，而我的 z-index 值与该事实不一致。这使它看起来出现故障。