Javascript 在无限循环中使用jQuery设置单词宽度动画

我有一个jQuery问题，这让我的生活很艰难

那么我到现在为止都做了些什么

你能看到的是，我很接近。我需要实现的是在一个句子中显示单词，一旦显示一个单词，就显示下一个单词。直到一个句子没有宽度为0的单词。一旦发生这种情况，句子就会隐藏起来，下一个句子就开始了。一旦最后一句话中的所有单词都可见，一切都将重新开始（无限循环）。但是单词之间和句子之间也必须有延迟的功能。我现在在代码方面没有取得进展，所以我想问一下是否有人有类似的问题，或者是否有一个插件可以拯救我的生命

它应该如何工作如下

文字必须具有动画效果（就像现在一样）

一旦出现一个单词，就会调用下一个单词

一旦一个句子中的所有单词都出现了，这个句子就会隐藏起来。然后下一个单词开始出现在第二句中

有些单词必须有延迟，意思是它们应该在给定的延迟之后开始出现

此外，我应该能够设置句子之间的间隔

一旦第二句话说完，它就应该隐藏起来。一切都应该重新开始

---

非常感谢您的帮助。

下面的代码应该可以解决您的问题。我添加了更多的属性（数据属性），所以它更具动态性

var-statemens=$（'.statement'）；
var maxSentenceIndex=句子长度-1；
var currentSentenceIndex=0；
var currentSession=null；
var wordClass='.word行'；
var标准延迟=0；
var animationDuration=1500；
var currentWordIndex=0；
函数加载语句（）{
currentWordIndex=0；
当前句子=句子.eq（当前句子索引）；
如果（currentSentenceIndex>maxSentenceIndex）{
currentSentenceIndex=0；
}否则{
currentSentenceIndex++；
}
currentSession.show（）；
loadWord（）；
}
函数loadWord（）{
var$sentenceWords=$（当前句子）.find（wordClass）；
var maxWordsIndex=$sentenceWords.length-1；
animateWords（$sentenceWords.eq（currentWordIndex））；
如果（currentWordIndex>maxWordsIndex）{
$sentenceWords.css（'width'，0）；
$（当前句子）.hide（）；
加载语句（）；
}否则{
currentWordIndex++；
}
}
函数animateWords（word、回调）{
var$word=$（word）；
变量延迟=$（字）.data（'delay'）| | standardDelay；
变量宽度=$（word）.data（'width'）| |'100%'；
var speed=$（word）.data（'speed'）| | animationDuration；
$word.animate({
宽度：宽度
}, {
持续时间：速度，
完成：函数（）{
if（typeof（callback）=‘function’）{
设置超时（回调、延迟）；
}否则{
设置超时（加载字、延迟）；
}
}
});
}
加载语句（）
.element{
文本对齐：左对齐；
颜色：白色；
背景：灰色；
宽度：120px；
高度：600px；
顶部填充：50像素
}
.字行{
溢出：隐藏；
宽度：0；
}
.字{
显示：块；
宽度：108px；
空白：nowrap；
文本对齐：居中；
字体大小：22px；
}

JS-Bin
第一个字
第二个词
自动
坚强的
超级的
马里奥
你好
情况如何。
生活
太好了。
请将代码直接粘贴到问题中并格式化。相关代码仅在非现场链接中的问题在此处不适用，因为非现场资源往往会随着时间的推移而消失或更改，使得该问题对于以后的问题没有太大的参考价值。在这里要求第三方插件也是不合适的。您在本规范的哪一部分寻求帮助。jsbin似乎已经运行了很多。请具体说明你在寻求什么帮助。对于堆栈溢出，仅仅发布一大块代码和多步骤规范并不是一个足够具体的问题。对此我很抱歉，我将根据您提供的指南来回答我的下一个问题。我目前的问题是，在开始显示下一个单词之前，需要工作的单词延迟了。不知何故，动画（）完成不是在动画结束时触发的，而是在动画开始时触发的。请使用编辑链接修复您的问题。