javascript - 上一个完成时的jQuery启动函数

我有5个文本节点，例如

<h2 class="textillate"> test </h2>
<h2 class="textillate"> test </h2>
<h2 class="textillate"> test </h2>
<h2 class="textillate"> test </h2>
<h2 class="textillate"> test </h2>

我想在前一个节点完成后对这些节点进行一次纹理处理。

我尝试了这个但没有做到:(

$(document).ready(function() {
nodes = $('.textillate');
nodes.eq(0).textillate()
.eq(1).textillate();
});

最佳答案

您可以使用功能参数，即initialDelay。例如，这可以解决问题：

nodes = $('.textilate');
nodes.each(function(index, element){
      $(element).textillate({initialDelay: index*1000});
}

演示：http://jsfiddle.net/LUq39/

查看更多usage options以更精细地调整各种持续时间。

更新

这是一个更新的演示，它取决于字符串的长度：http://jsfiddle.net/LUq39/13/它实际上会累积延迟时间：

var nodes = $('.textilate');
var delay = 0
nodes.each(function(){
      delay += $(this).prev()? $(this).prev().text().length*50:0;
      $(this).textillate(
          {initialDelay: delay, in:{delay:50}, out:{delay:50}}
      );
})