在data-rel命令中應用相同的函數

Question

我有多個對象需要應用。 delay()和.fadeIn()函數，但函數需要按照data-rel數字的順序應用。

而且，我需要延遲100爲每個對象增加...

這裏是一個jsFiddle工作。

我需要它的 data-rel="1"以淡入與延遲0 data-rel="2"以淡入與延遲100 data-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> 

SCRIPT：

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

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

Answer 1

只要計算delay取決於值rel

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

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

fiddle

Answer 2

這工作。

$(".me").hide(); 
var waiter = 0; 
    $(".me").each(function() { 
    $(this).delay(waiter).fadeIn(500); 
     waiter += 100; 
}); 

http://jsfiddle.net/shvu07s2/4/

編輯：

$(".me").hide(); 
var waiter = 0; 
    $(".me").each(function() { 
     waiter = $(this).attr('data-rel')*1000-1000; 
    $(this).delay(waiter).fadeIn(500); 
}); 

http://jsfiddle.net/shvu07s2/8/

Answer 3

最短:)

$(".me").each(function() { 
    $(this).delay(100*$(this).attr("data-rel")).fadeIn(500); 
}); 

Answer 4

使用您的數據值，您可以d O此：

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

    $(".me").each(function() { 
    var $this = $(this), 
     relval = $this.data('rel'); 

    $this.delay(0 + relval).fadeIn(500); 
    }); 

http://jsfiddle.net/shvu07s2/7/