文本动画:每个和settimeout

Question

我正在尝试为一些文本动画。显示不同的divs并接一个地隐藏了一个，因此看起来一个单词仅减少到一个字母，然后再次完成。

我需要在.east（）周期之间进行某种延迟。我尝试使用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>

Answer 2

window.setTimeout期望第一个参数而不是函数调用。

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

如果您想在一个地方互相显示Divs - 您必须添加一些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>

Answer 3

尝试这个：

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