Javascript 文本动画：每个和设置超时

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

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

功能fadeInOut（元素）{
$（元素）.fadeIn（“慢”，函数（）{
美元（本）。淡出（“缓慢”）；
})
}
函数displayStepWords（）{
$（'.stepWord'）。每个（函数（i）{
setTimeout（fadeInOut（this），5000*i）；
})
}
displayStepWords（）

缓冲酵母抽取物
通过
B
通过
再见
试试这个：

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

试试这个：

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

不清楚你的目标是什么，但大致如下：


功能fadeInOut（元素）{
$（元素）.fadeIn（“慢”，函数（）{
美元（本）。淡出（“缓慢”）；
})
}
函数displayStepWords（）{
$（'.stepWord'）。每个（函数（i）{
var me=$（此）；
setTimeout（函数（）{fadeInOut（me）；}，1000*i）；
})
}
displayStepWords（）

缓冲酵母抽取物
通过
B
通过
再见
不清楚你的目标是什么，但有点像：


功能fadeInOut（元素）{
$（元素）.fadeIn（“慢”，函数（）{
美元（本）。淡出（“缓慢”）；
})
}
函数displayStepWords（）{
$（'.stepWord'）。每个（函数（i）{
var me=$（此）；
setTimeout（函数（）{fadeInOut（me）；}，1000*i）；
})
}
displayStepWords（）

缓冲酵母抽取物
通过
B
通过
再见
window.setTimeout要求第一个参数使用函数，而不是函数调用

setTimeout(function, milliseconds, param1, param2, ...)

如果你想在一个地方一个接一个地显示div，你必须添加一些css

<style>
  .step-word {
    position: absolute;
    display: none;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="step-word">BYE</div>
  <div class="step-word">BY</div>
  <div class="step-word">B</div>
  <div class="step-word">BY</div>
  <div class="step-word">BYE</div>
</div>
<script>
  var delay = 500,
      $stepWords = $('.wrapper .step-word');

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

  $stepWords.each(function(i, elem) {
    setTimeout(function () {
      fadeInOut($stepWords.eq(i));
    }, delay * i);
  });
</script>


.单字{
位置：绝对位置；
显示：无；
}
缓冲酵母抽取物
通过
B
通过
缓冲酵母抽取物
var延迟=500，
$stepWords=$（'.wrapper.stepWords'）；
函数fadeInOut（$element）{
$element.fadeIn（“慢”，函数（）{
$element.fadeOut（“慢”）；
});
}
$stepWords.每个（函数（i，元素）{
setTimeout（函数（）{
fadeInOut（$stepWords.eq（i））；
}，延迟*i）；
});
window.setTimeout要求第一个参数使用函数，而不是函数调用

setTimeout(function, milliseconds, param1, param2, ...)

如果你想在一个地方一个接一个地显示div，你必须添加一些css

<style>
  .step-word {
    position: absolute;
    display: none;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="step-word">BYE</div>
  <div class="step-word">BY</div>
  <div class="step-word">B</div>
  <div class="step-word">BY</div>
  <div class="step-word">BYE</div>
</div>
<script>
  var delay = 500,
      $stepWords = $('.wrapper .step-word');

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

  $stepWords.each(function(i, elem) {
    setTimeout(function () {
      fadeInOut($stepWords.eq(i));
    }, delay * i);
  });
</script>


.单字{
位置：绝对位置；
显示：无；
}
缓冲酵母抽取物
通过
B
通过
缓冲酵母抽取物
var延迟=500，
$stepWords=$（'.wrapper.stepWords'）；
函数fadeInOut（$element）{
$element.fadeIn（“慢”，函数（）{
$element.fadeOut（“慢”）；
});
}
$stepWords.每个（函数（i，元素）{
setTimeout（函数（）{
fadeInOut（$stepWords.eq（i））；
}，延迟*i）；
});
fadeInOut（此）
立即处理；您需要将其包装在函数中。用
（）=>{fadeInOut（this）}
fadeInOut（this）
立即处理；您需要将其包装在函数中。将其替换为
（）=>{fadeInOut（this）}