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> 

I am trying to figure out how to create a word-changing system with a longer time fixed on the last word of my list.

It is working for the rotating part but I cannot figure out how to make a pause on the last word. I changed the .delay to 5000 but it doesn't work as expected.

I want to have each word appearing 500ms and the last one 5s.

Why is this .delay() not working ?

here is the 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

I wouldn't use delay and setInterval and would do it like this:

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