동일한 기능을 데이터 순서대로 적용하십시오.

Question

적용 할 객체가 여러 개 있습니다. delay() 및 .fadeIn()이 기능하지만 데이터 기밀 번호 순서대로 기능을 적용해야합니다.

또한, 나는 여기에

가 jsFiddle 워크 시트입니다 ... 각 개체에 대해 (100)에 의해 증가하는 지연이 필요합니다.

나는 지연 지연 0 fadeIn에 data-rel="2"와 fadeIn에에게 data-rel="1"을 필요가 무엇 지연 (200)

HTML 100 fadeIn에 data-rel="3" :

<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

을 계산하면됩니다.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를 사용하여

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

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

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

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