jquery - 按 data-rel 顺序应用相同的函数

Question

我有多个对象想要应用 .delay() 和 .fadeIn() 函数，但该函数需要按数据顺序应用-rel 数字。

此外，我需要将每个对象的延迟增加 100...

这是一个jsFiddle工作表。

我需要什么data-rel="1" 淡入，延迟 0data-rel="2" 淡入，延迟 100data-rel="3" 淡入，延迟 200

HTML:

<div class="fadein">
    <p class="me" data-rel="1">1</p>
    <p class="me" data-rel="3">2</p>
    <p class="me" data-rel="2">3</p>
</div>

脚本:

$( ".me" ).hide();

  $( ".me" ).each(function() {
    $( this ).delay(0).fadeIn(500);
  });

Answer 1

只需根据 rel 中的值计算延迟

$(".me").each(function () {
    var el = $(this),
        rel = el.data("rel"),
        delay = (rel - 1) * 100;

    el.delay(delay).fadeIn(500);
});

fiddle