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（）不起作用？

這是codepen： 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();