JS setTimeout間隔ごとにクラスを追加/削除する

Question

私は6秒ごとに新しい配列要素を出力するスクリプトを持っています。 今度はすべてのInterval a Class（Css Animation）を追加して後で削除したいと思います。だから、すべての数字がフェードイン（そして、それは私のCSSアニメーションにあります）。 私は一度、h2＃引用符全体をアニメーション化しようとしましたが、script/cssを使っていないようです。ここで が生き例です：http://quotes.sumisuweb.at/

var quoteIndex = 0; 
var quoteJson = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; 


var setQuote = function() { 

    var quote = quoteJson[quoteIndex]; 
    quoteIndex = (quoteIndex + 1) % quoteJson.length; 
    setTimeout(setQuote, 6000); 
    $("#quote").text(quote); 
    } 


    jQuery(document).ready(function($) { 
    setQuote(); 
    }); 

CSS：

#quote { 
    text-shadow: 0px 0px 13px white; 
    text-align: center; 
    margin-top: 100px; 
    font-size: 100pt; 
} 

.animateQuote { 
    animation-name: fadeIn; 
    animation-duration: 6s; 
    animation-timing-function: linear; 
} 

@keyframes fadeIn { 
    0% {opacity: 0.0;} 
    80% {opacity: 1.0;} 
    100% {opacity: 0.0;} 
} 

Answer 1

私はあなたが削除/クラスを追加するタイムアウトを必要とは思いません。

アニメーションを繰り返し設定してから、アニメーションを開始するときに同時にアニメーションを開始することができます。変更のコメントを

更新コード：

EDIT：アニメーションがタイムアウトと同期していなかった不具合を修正しました。 hereおよびhereからの修正

アニメーション/タイムアウトも1秒にしました。それは私がsetTimeoutにおける時間パラメータとjqueryのアニメーションは、時間の期間にわたって相互に同期したままに頼ることができないかなり確信しているより多くの反復

var quoteIndex = 0; 
 
var quoteJson = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; 
 
var $quote = null; 
 

 

 
var setQuote = function() { 
 
    $quote[0].style.animation = 'none'; // remove the animation 
 
    void $quote[0].offsetWidth; // trigger reflow 
 
    $quote[0].style.animation = null; // add the animation back 
 

 
    var quote = quoteJson[quoteIndex]; 
 
    quoteIndex = (quoteIndex + 1) % quoteJson.length; 
 
    $quote.text(quote); 
 
    setTimeout(setQuote, 1000); // needs to be same time as animation 
 
} 
 

 

 
jQuery(document).ready(function($) { 
 
    $quote = $("#quote"); 
 
\t setQuote(); 
 
});

#quote { 
 
    text-shadow: 0px 0px 13px white; 
 
    text-align: center; 
 
    margin-top: 100px; 
 
    font-size: 100pt; 
 
    animation: fadeIn 1s linear infinite; /* needs to be same time as timeout */ 
 
} 
 

 
@keyframes fadeIn { 
 
    0% {opacity: 0.0;} 
 
    80% {opacity: 1.0;} 
 
    100% {opacity: 0.0;} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="quote"></div>

Answer 2

をテストする方が簡単です。代わりに、定期的に引用符を変更すると、あなたが同期して滞在を願って定期的にアニメーションを管理するための、私は、単一のメソッドを使用して一緒に二つのことを管理するでしょう

：

var quoteIndex = 0; 
 
var quoteJson = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; 
 

 

 
var setQuote = function() { 
 
    var quote = quoteJson[quoteIndex]; 
 
    quoteIndex = (quoteIndex + 1) % quoteJson.length; 
 
    var elem = $('#quote'); 
 
    elem.animate({opacity: 0}, 1000, function() { // hide for 1s 
 
     elem.text(quote); // updated here for sure when hidden 
 
     elem.animate({opacity: 1}, 3000, function() { // fade in for 3s 
 
     setTimeout(setQuote, 2000); // wait for 2s 
 
     }); 
 
    }); 
 
}; 
 

 

 
$(document).ready(function() { 
 
    setQuote(); 
 
});

#quote { 
 
    text-shadow: 0px 0px 13px white; 
 
    text-align: center; 
 
    margin-top: 100px; 
 
    font-size: 100pt; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2 id="quote">1</h2>