Alin Alin - 18 days ago 5
jQuery Question

Apply same function in data-rel order

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);
});

Answer

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

Comments