javascript - 文字动画: each and setTimeOut

Question

我正在尝试为一些文本添加动画。不同的div依次显示和隐藏，这样看起来就像一个单词被简化为一个字母，然后又完成了。

我需要在 .each() 周期之间有某种延迟。我尝试使用 setTimeOut() 函数，但我仍然看到所有 div 一起出现然后消失，而不是一个一个地出现。

function fadeInOut(element) {
  $(element).fadeIn("slow", function() {
    $(this).fadeOut("slow");
  })
}

function displayStepWords() {
  $('.stepWord').each(function(i) {
    setTimeout(fadeInOut(this), 5000 * i);
  })
}

displayStepWords();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stepWord">BYE</div>
<div class="stepWord">BY</div>
<div class="stepWord">B</div>
<div class="stepWord">BY</div>
<div class="stepWord">BYE</div>

Answer 1

不清楚您的具体目标是什么，但类似于:

function fadeInOut(element) {
  $(element).fadeIn("slow", function() {
    $(this).fadeOut("slow");
  })
}

function displayStepWords() {
  $('.stepWord').each(function(i) {
  var me = $(this);
    setTimeout( function(){fadeInOut(me);}, 1000 * i );
  })
}

displayStepWords();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stepWord">BYE</div>
<div class="stepWord">BY</div>
<div class="stepWord">B</div>
<div class="stepWord">BY</div>
<div class="stepWord">BYE</div>