JS setTimeout add/remove class every interval

Question

I have a Script which prints out a New Array Element every 6 Seconds. Now I want to add every Interval a Class (Css Animation) and remove it afterwards. So that every Number fades in (and out - that's in my css animation). I once tried to animate the whole h2#quotes - but it seems to get out of tact with script / css. Here is a live Example: 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;}
}

The Code is there - the Animation is 6 Seconds – parvaneh Nov 21 '17 at 16:52 — parvaneh, Nov 21 '17 at 16:52

Ricardo Ribeiro · Answer 1 · 2017-11-21T18:06:20.460

I don't think you need a timeout to add/remove the class.

You can set the animation to repeat and then you start the animation at the same time you update the number.

Updated code with comments of the changes:

EDIT: fixed bug where animation was not in sync with the timeout. Fix from here and here.

Also made the animation/timeout 1sec. so it's easier to test more iterations

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

Thanks! That seemed to work at first, but after running the script for 1-2 Minutes it doesn't match any more. The Number changes inbetween the animation. — parvaneh, Nov 21 '17 at 17:24
Fixed! I think now it will always be in sync with the timeout — Ricardo Ribeiro, Nov 21 '17 at 18:07

score 0 · Answer 2 · answered Nov 21 '17 at 17:11

0

I'm fairly sure the time parameters in setTimeout and jquery animations can't be relied upon to remain in sync with each other over periods of time.

Instead of changing the quote periodically, and managing a periodic animation that you hope stays in sync, I would manage the two things together using a single method:

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>

answered Nov 21 '17 at 17:11

arbuthnott

3,819
2
8
21

Thanks, thats what I also thought. Your exmaple works now. But it is not the same animation any more, before the Opacity faded in slowly and faded out fast. Do you know how I can do this with your code? – parvaneh Nov 21 '17 at 17:37
I totally removed the css animation, and used jquery animation instead. It should be easy to replace the durations I put in with whatever you like, and there are easing options available too: http://api.jquery.com/animate/ – arbuthnott Nov 21 '17 at 17:38
thanks. You are great! I am just confused with the animation in a animation and then there is the timeout. I don't get why. – parvaneh Nov 21 '17 at 17:41
You could immediately call `setQuote` again if you liked, the timeout is just so that the quote "sits there" at full opacity for a bit before starting to fade again. The nesting inside one another is so that the code inside is executed after the previous animation finishes. – arbuthnott Nov 21 '17 at 17:44

JS setTimeout add/remove class every interval

2 Answers2