配列のテキストシーケンスにギャップがあります

Question

私は単純な配列のテキストシーケンスを使用していますが、A、B、Cをどのようにして2500を表示してから、戻ってくるのかわかりません。今のところ、2500を示す空白のフレームがあります。

どのように私はその空のシーケンスを取り除くことができます知っている？

$('#cover1-seq1').show(); 
 
\t var arr = $(".cover1-seq"); 
 
\t var arrLen = arr.length; 
 
\t var i = 0; 
 

 
\t setInterval(function(){ 
 
\t \t $(".cover1-seq").hide(); 
 
\t \t $(arr[i]).show(); 
 
\t \t i === arrLen ? i = 0 : i++; 
 
\t }, 2500);

.cover1-seq { 
 
\t display: none; 
 
} 
 
.cover1-title { 
 
\t font-size: 6rem; 
 
\t margin-bottom: 25px; 
 
\t text-align: center; 
 
\t position: relative; 
 
    z-index: 1; 
 
} 
 
.cover1-description { 
 
\t font-family: 'Roboto', sans-serif; 
 
\t font-size: 3.5rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="home-cover1-wrap"> 
 
\t \t \t \t <div class="total-center cover1-seq" id="cover1-seq1"> 
 
\t \t \t \t \t <h1 class="cover1-title">A</h1> 
 
\t \t \t \t \t <p class="cover1-description">A description</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="total-center cover1-seq"> 
 
\t \t \t \t \t <h1 class="cover1-title">B</h1> 
 
\t \t \t \t \t <p class="cover1-description">B description</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="total-center cover1-seq"> 
 
\t \t \t \t \t <h1 class="cover1-title">C</h1> 
 
\t \t \t \t \t <p class="cover1-description">C description</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div>

Answer 1

あなたは剰余%オペレータとjQuery $.eq()機能をこのように使用してコードを簡素化することができます。

var arr = $('.cover1-seq'); //.show(); 
 
var arrLen = arr.length; 
 
var i = 0; 
 

 
var loop = function() { 
 
    var item = arr.eq(i); 
 
    var description = item.find('.cover1-description'); 
 

 
    arr.hide(); 
 
    description.hide(); 
 

 
    item.show(); 
 
    description.fadeIn(2000); 
 

 
    i = (i + 1) % arrLen; 
 
}; 
 

 
loop(); 
 
setInterval(loop, 2500);

.cover1-seq { 
 
    display: none; 
 
} 
 
.cover1-title { 
 
    font-size: 6rem; 
 
    margin-bottom: 25px; 
 
    text-align: center; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.cover1-description { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 3.5rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="home-cover1-wrap"> 
 
    <div class="total-center cover1-seq" id="cover1-seq1"> 
 
     <h1 class="cover1-title">A</h1> 
 
     <p class="cover1-description">A description</p> 
 
    </div> 
 
\t <div class="total-center cover1-seq"> 
 
     <h1 class="cover1-title">B</h1> 
 
     <p class="cover1-description">B description</p> 
 
    </div> 
 
    <div class="total-center cover1-seq"> 
 
     <h1 class="cover1-title">C</h1> 
 
     <p class="cover1-description">C description</p> 
 
    </div> 
 
</div>