Question

我正在进行幻灯片放映，我希望每个迭代都能有一个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);
        });
    });
});

Answer 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

Jquery迭代不按顺序显示

1 个答案: