1つのループの文章をフェードインまたはアウトする

Question

私は、HTMLページから1つの単語を1つのループに変更しようとしています。私はそれを一度ループしたいだけですが、今度は単語が見えなくなったらコードをループさせてしまいました。

jQueryを使用してフェードインとフェードアウトを行いました。インクリメンタルであることはわかっていますが、配列の画面には表示されません。最初と最後の単語は表示されますが、その間の配列からは何も表示されません。

私は配列で決して終わりのないループを作る方法を見つけましたが、それが最後のインデックスに達したら一度停止して、その後に1単語にとどまりたいと思います。

これを解決する別の方法の助けやアイデアは大歓迎です。

#changeMainText{ 
    color: #34495E; 
    opacity: 1; 
    transition: opacity 0.5s; 
} 
.hide{ 
    opacity: 0 !important; 
} 

<div id="main"> 
    <h1>I am <span id="changeMainText" style="color:#34495E">a Product 
    Manager</span>.</h1> 
</div> 

$(document).ready(function() { 
    var mainText = ["a Programmer", "a Web Developer", "a Student"]; 
    var counter = -1; 
    var textInterval; 
    var elem = document.getElementById("changeMainText"); 
    var elem1 = "-1"; 
    textInterval = setInterval(changeText(counter), 2500); 

    function changeText(counter) { 
     elem.classList.add('hide'); 
     setTimeout(function() { 
      elem.innerHTML = mainText[counter]; 
      elem.classList.remove('hide'); 
      counter = counter + 1; 
      document.getElementById("changeMainText").style 
       .color = "#34495E"; 
      if (counter < mainText.length) { 
       elem.innerHTML = mainText[counter]; 
       changeText(counter); 
      } 
      if (counter == 3) { 
       document.getElementById("changeMainText").style 
        .color = "red"; 
       elem.innerHTML = "a Person"; 
       clearInterval(textInterval); 
      } 
     }, 2500); 
    } 
}); 

Answer 1

。そして、かなり単純化することができます。 $(document).ready(function() {});で始まり、その後はjQueryを使用しないでください。 jQueryを使用している場合は、それを手伝ってください。

var loopText = [ 
 
    'a Product Manager', 
 
    'a Programmer', 
 
    'a Web Developer', 
 
    'a Student' 
 
]; 
 
var i = 0; 
 
var max = loopText.length; 
 
var $text = $('#swap-text'); 
 
var css = {}; 
 

 
// Immediately Invoked Named Function Expression - we define it then 
 
// immediately call it by the parenthesis after the closing bracket, 
 
// function(){}(). Once it has done it's work we call it again with 
 
// `setTimeout()` as long as our counter `i` is not equal to the 
 
// number of entries in the `loopText` array. 
 
(function changeText() { 
 

 
    if (i < max) { 
 

 
    if (i === (max - 1)) { 
 
     css['color'] = 'red'; 
 
    } 
 

 
    $text 
 
     .fadeOut(0) 
 
     .text(loopText[i++]) 
 
     .css(css) 
 
     .fadeIn(500); 
 

 
    setTimeout(changeText, 2500); 
 

 
    } 
 

 
}());

#swap-text { 
 
    color: #34495E; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>I am <span id="swap-text"></span>.</h1>

Answer 2

問題は、あなたのcssである：

.hide{ 
    opacity: 0 !important; 
    } 

不透明度は、テキストが表示されるように許可していません。あなたがフェードインを探しているなら、それを削除するか、opacity: 1

にそれを変更してみてくださいまたはあなたが行うことができるという効果をフェードアウト：

$(document).ready(function() { 
    var mainText = ["a Programmer", "a Web Developer", "a Student","a Person"]; 
    var elem = document.getElementById("changeMainText"); 

function repeat(i){ 
    if (i<mainText.length){ 
     setTimeout(function(){ 
      $(elem).fadeOut('slow').html(mainText[i]).fadeIn('slow');i++ 
      repeat(i); 
     },2500); 
    } 
} 

repeat(0); 

Answer 3

だから、あなたは2.5秒毎に実行される間隔を設定しています。最初に機能するのは、非表示のelemです。その後、テキストを設定するタイムアウトを設定し、2.5秒後にelemを表示します。次のインターバルが実行される予定で、すぐにhideクラスが適用されます。

私はすべての間隔を取り除き、あなたの問題を見るために一歩前に戻すことをお勧めします。ここで私はあなたが実装しようとしていると考えているものを説明しお粗末なASCIIアート・フロー・ダイアグラムの事です：

initial state -> hide -> change text -> show -> next? --no-> stop playing 
        ^----------------------yes----/ 

だから、私はあなたは2つの機能が必要だと思います。テキストを変更してelemを有効にするものと、配列の次の要素に移動してそれに応じて動作することを確認するものです。

function changeTextAndShow() { 
    // set the text with the current position 
    elem.innerHTML = mainText[counter]; 

    // funny stuff 
    if(counter == mainText.length - 1) { 
     document.getElementById("changeMainText").style 
      .color = "red"; 
    } else { 
     document.getElementById("changeMainText").style 
      .color = "#34495E"; 
    } 
    // show the elem 
    elem.classList.remove('hide'); 

    // schedule the next change 
    counter++; 
    setTimeout(continueText, 2500);  
} 

function continueText() { 
    // if there's more text to display 
    if(counter < mainText.length) { 
     elem.add('hide'); 
     // being blank for 2.5s might not be what you want. 
     // change this to the duration you really want it empty 
     setTimeout(changeTextAndShow, 2500); 
    } 
} 

そして同様に、それはものになるだろうそれを使用する：あなたのコードは少し混乱して

var mainText = ["a Programmer", "a Web Developer", "a Student", "a Person"]; 
var counter = 0; 
var elem = document.getElementById("changeMainText"); 
setTimeout(continueText, 2500);