setInterval() 和 .delay()

Question

// hide word-rotate spans
$('.word-rotate').hide();

// Set variables
var words = [], 
    index = 0,
    $span = $('.text-rotate');

// Get words within 'word-rotate' spans and push in array
$('.word-rotate').each(function() {
  words.push($(this).text());
});

// Rotate function
function rotateFunction() {
  $span.text(words[index]).fadeIn(0);
  if ( index == words.length -1 ) {
    $span.css('color', '#F42156');
    $span.delay(50000).fadeOut(0);
    index = 0;
  } else {
    $span.css('color', '#00FFEE');
    $span.delay(500).fadeOut(0);
    index++;
  }
}
setInterval(rotateFunction, 500);

html {
  background: #313449;
  color: #ffffff;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

.text-rotate {
  color: #00FFEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div>
  <h1>Make it more
    <br />
    <span class="text-rotate"></span>
    <span class="word-rotate">attractive</span>
    <span class="word-rotate">fun</span>
    <span class="word-rotate">colorful</span>
    <span class="word-rotate">fancy</span>
    <span class="word-rotate">intelligent.</span>
  </h1>
</div>

我想弄清楚如何创建一个单词更改系统，将更长的时间固定在我列表的最后一个单词上。

它对旋转部分有效，但我不知道如何在最后一个词上停顿。我将 .delay 更改为 5000，但它没有按预期工作。

我想让每个单词出现 500 毫秒，最后一个出现 5 秒。

为什么这个 .delay() 不起作用？

这是代码笔：http://codepen.io/mouuuton/pen/ZBzqGL/

Answer 1

// hide word-rotate spans
$('.word-rotate').hide();

// Set variables
var words = [], 
    index = 0,
    $span = $('.text-rotate');

// Get words within 'word-rotate' spans and push in array
$('.word-rotate').each(function() {
  words.push($(this).text());
});

// Rotate function
function rotateFunction() {
  $span.text(words[index]).fadeIn(0);
  if ( index == words.length -1 ) {
    $span.css('color', '#F42156');
    $span.delay(50000).fadeOut(0);
    index = 0;
    setTimeout(rotateFunction, 5000);
  } else {
    $span.css('color', '#00FFEE');
    $span.delay(500).fadeOut(0);
    index++;
    setTimeout(rotateFunction, 500);
  }
}
setTimeout(rotateFunction, 500);

html {
  background: #313449;
  color: #ffffff;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

.text-rotate {
  color: #00FFEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div>
  <h1>Make it more
    <br />
    <span class="text-rotate"></span>
    <span class="word-rotate">attractive</span>
    <span class="word-rotate">fun</span>
    <span class="word-rotate">colorful</span>
    <span class="word-rotate">fancy</span>
    <span class="word-rotate">intelligent.</span>
  </h1>
</div>

Answer 2

我不会使用 delay 和 setInterval，而是会这样做：

function rotateFunction() {
  $span.text(words[index]).fadeIn(0);
  if ( index == words.length -1 ) {
    setTimeout(function() {
      $span.css('color', '#F42156');
      $span.delay(50000).fadeOut(0);
      index = 0;
      rotateFunction();
    }, 5000);
  } else {
    setTimeout(function() {
      $span.css('color', '#00FFEE');
      $span.delay(500).fadeOut(0);
      index++;
      rotateFunction();
    }, 500);
  }
}

rotateFunction();

setInterval() 和 .delay()

setInterval() and .delay()

javascript

jquery

delay

setinterval