setInterval () and .задержка()

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

Я пытаюсь понять, как создать систему изменения слов с более длительным временем, зафиксированным на последнем слове моего списка.

Это работает для вращающейся части, но я не могу понять, как сделать паузу на последнем слове. Я поменял .задержка до 5000, но это не работает, как ожидалось.

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

Почему это .delay () не работает ?

вот кодепен: http://codepen.io/mouuuton/pen/ZBzqGL/

2 ответа

  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>

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