setInterval（）和.delay（）

Question

＆＃13;

＆＃13;

// 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); 

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我正在试图找出如何创建一个更改单词的系统，并将更长的时间固定在我的列表的最后一个单词上。

它适用于旋转部件，但我无法弄清楚如何在最后一个单词上暂停。我将.delay更改为5000，但它没有按预期工作。

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

为什么这个.delay（）不起作用？

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

Answer 1

＆＃13;

＆＃13;

// 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);

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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();