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>

jQuery怎么样

既然您希望函数一个接一个地执行，为什么不只是一个for循环：

var items = $('.textillate')
for(var i = 0; i < items.size(); i++) {
    $(items[i]).textillate();
}

var items=$（'.textillate'）
对于（var i=0；i

正如我所理解的，您希望等待一个textilate结束，然后调用下一个textilate。 我只是读了Textillate API，它没有回调/承诺选项

由于textillate不提供回调机制，因此不可能精确地知道动画何时结束。除非您不知道每个动画的持续时间，否则可以等待一个动画结束后调用下一个动画

如果要同时对每个元素应用Textillate，只需使用：

$('.textillate').textillate();

---

您可以使用函数参数，即

initialDelay

。例如，这样做的诀窍是：

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

演示：

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

更新

下面是一个更新的演示，它取决于字符串的长度：它实际上累积了延迟时间：

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

---

使用与textillate插件不熟悉的方法，但它可能接受回调方法，这是您应该使用的方法，以强制下一个插件在当前插件完成后启动。您的选择器是错误的：您的类是

textilate

（一个“l”），您的选择器是

。textillate

（2“l”）。@MikeW只是一个拼写错误，在我的代码中不存在，但thx:）未捕获的TypeError:Object#没有方法“textillate”$（元素），但我认为它会同时生效。我有一个选择来破解它，可能是基于他们的选择，posted belowIt使我的五个节点文本同时发生：/I不能，因为我不知道动画会持续多长时间，因为我不能提前获得节点值的长度。我相信这可以由输入/输出延迟控制。更新我的答案，看一看是的，这看起来更好，因为你要考虑文本的长度来设置初始延迟和+1

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

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