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

不确切地知道你的目标是什么，但是像：

＆＃13;

VMWare

＆＃13;

{{1}}

＆＃13;

Answer 2

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>

Answer 3

试试这个：

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

文本动画：each和setTimeOut

3 个答案: