在data

在data-rel命令中应用相同的功能(Apply same function in data-rel order)

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

另外，我需要为每个对象增加100个延迟...

这是一个jsFiddle工作表。

我需要它data-rel="1"到fadeIn有延迟0 data-rel="2"到fadeIn有延迟100 data-rel="3"到fadeIn有延迟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); });

I have multiple objects that I want to apply a .delay() and .fadeIn() function but the function needs to be applied in the order of the data-rel numbers.

Also, I need the delay to increase by 100 for each object...

Here is a jsFiddle worksheet.

What I would need it the data-rel="1" to fadeIn with delay 0 data-rel="2" to fadeIn with delay 100 data-rel="3" to fadeIn with delay 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>

SCRIPT:

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

最满意答案

只需根据rel的值计算delay

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

小提琴

Just compute the delay depending on the value in rel

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

fiddle