以 data-rel 顺序应用相同的功能答案

【问题标题】：Apply same function in data-rel order以 data-rel 顺序应用相同的功能
【发布时间】：2014-11-04 10:41:05
【问题描述】：

我有多个对象，我想应用一个 .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>

脚本：

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

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

【问题讨论】：

标签： jquery html delay auto-increment

【解决方案1】：

只需根据rel 中的值计算delay

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

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

fiddle

【讨论】：

【解决方案2】：

最短 :)

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

【讨论】：

是的，它工作正常，谢谢你的例子。为你 +1 :)

【解决方案3】：

使用您的数据值，您可以这样做：

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

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

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

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

【讨论】：

这行得通，kida，但我需要（并从@Andreas 得到）是延迟自动增加 100，并且 data-rel 只给出订单...放置延迟data-rel 内部仅适用于少数对象，但如果您有很多对象，它会很烦人。感谢您的想法，+1 尝试和示例。

【解决方案4】：

这行得通。

$( ".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/

【讨论】：

不，它没有:) 如果我不需要它来根据数据相关数增加延迟，它会起作用。感谢您的尝试：D