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

【问题标题】：Animate words width with jQuery in infinite loop在无限循环中使用 jQuery 为单词宽度设置动画
【发布时间】：2016-03-11 00:33:36
【问题描述】：

我遇到了一个 jQuery 问题，这让我的生活变得艰难。

如果JSBin@

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

它的工作原理如下；

文字必须具有动画效果（就像现在一样）
出现一个词，就叫下一个词
一旦出现一个句子中的所有单词，该句子就会隐藏。然后下一个单词开始出现在第二句中。
有些词必须有延迟，这意味着它们应该在给定的延迟之后开始出现
我还应该能够设置句子之间的间隔。
第二句完成后，它应该隐藏起来。一切都应该重新开始。

非常感谢您的任何帮助。

【问题讨论】：

请将您的代码直接粘贴到您的问题中并格式化。相关代码仅在场外链接中的问题在这里不合适，因为场外资源往往会随着时间的推移而消失或发生变化，这使得该问题对于以后出现的问题并不是很有用。在这里请求第三方插件也是题外话。
您在本规范的哪一部分寻求帮助。 jsbin 似乎已经运行了很多。请具体说明您要寻求帮助的具体内容。仅仅发布一大段代码和多步规范对于堆栈溢出来说并不是一个足够具体的问题。
对此我感到很抱歉，我将根据您提供的指南来回答我的下一个问题。我目前的问题是在开始显示下一个单词之前需要工作的单词的延迟。不知何故 animate() complete 不是在动画结束时触发，而是在开始时触发。
请使用编辑链接解决您的问题。

标签： javascript jquery css jquery-animate transition

【解决方案1】：

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

var sentences = $('.sentence');
var maxSentenceIndex = sentences.length - 1;
var currentSentenceIndex = 0;
var currentSentence = null;

var wordClass = '.word-row';
var standardDelay = 0;
var animationDuration = 1500;
var currentWordIndex = 0;

function loadSentence() {

  currentWordIndex = 0;
  currentSentence = sentences.eq(currentSentenceIndex);

  if (currentSentenceIndex > maxSentenceIndex) {

    currentSentenceIndex = 0;



  } else {
    currentSentenceIndex++;
  }
  currentSentence.show();
  loadWord();

}

function loadWord() {

  var $sentenceWords = $(currentSentence).find(wordClass);

  var maxWordsIndex = $sentenceWords.length - 1;


  animateWords($sentenceWords.eq(currentWordIndex));

  if (currentWordIndex > maxWordsIndex) {

    $sentenceWords.css('width', 0);
    $(currentSentence).hide();

    loadSentence();

  } else {
    currentWordIndex++;
  }

}

function animateWords(word, callback) {
  var $word = $(word);
  var delay = $(word).data('delay') || standardDelay;
  var width = $(word).data('width') || '100%';
  var speed = $(word).data('speed') || animationDuration;

  $word.animate({
    width: width
  }, {
    duration: speed,

    complete: function() {

      if (typeof(callback) == 'function') {
        setTimeout(callback, delay);
      } else {
        setTimeout(loadWord, delay);
      }

    }
  });


}
loadSentence();

.element{
    text-align: left;
    color: white;
    background: gray;
    width: 120px;
    height: 600px;
    padding-top: 50pxs
}
.word-row{
  overflow: hidden;
  width: 0;
}
.word{
  display: block;
  width: 108px;
  white-space: nowrap;
  text-align: center;
  font-size: 22px;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="element typed-strings">
                


                <div class="sentence sentence-1">
                    <div class="word-row"><span class="word">First word</span></div>
                    <div class="word-row"><span class="word">Second word</span></div>
                    <div class="word-row"><span class="word"><strong>auto</strong></span></div>
                    <div class="word-row"><span class="word">strong</span></div>
                    <div class="word-row"><span class="word">super</span></div>
                    <div class="word-row"><span class="word">mario</span></div>
                </div>    

            
                <div class="sentence sentence-2">
                    <div class="word-row"><span class="word"><strong>hello</strong></span></div>
                    <div class="word-row"><span class="word"><strong>how is.</strong></span></div>
                    <div class="word-row" data-delay="1400"><span class="word"><strong>life</strong></span></div>
                    <div class="word-row"><span class="word"><strong>GREAT.</strong></span></div>
                </div>



                
            </div>
</body>
</html>

让我知道这是否适合你。

【讨论】：