の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に変更しましたが、期待どおりに動作しません。

私は各単語を500msと最後の5sを表示したいと思います。

なぜこの.delay（）が機能しないのですか？ここ

がcodepenです：私はdelayとsetIntervalを使用していないだろうし、このようにそれを行うだろう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

：予想通り

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