上一个完成后的jQuery启动函数

jQuery start function when previous is finished

本文关键字：jQuery 启动 函数 上一个      更新时间：2023-09-26

我有 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/

查看更多使用选项，以更精细地调整各种持续时间。

更新

下面是一个更新的演示，取决于字符串的长度： 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}}
      );
})

据我所知，您想等待一个文本结束才能调用下一个文本。我刚刚阅读了Textillate API，它没有回调/承诺选项。

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

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

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

每个jQuery怎么样？

$(document).ready(function() {
    $('.textillate').each(function(index, element) {
        $(element).textillate();
    });
});

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

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