Losing setTimeout value after I switch tabs

Question

I have several columns of logos and I want to run a function that animates the logos on each column but not at the same time, I want to have a delay between the time the function runs for each column. Here is my code:

var startRotation = function() {
  $( ".ticker" ).each( function( index, element ){
    myInterval = setTimeout(function() { 
      otherInterval = setInterval(function(){ 
        slideImageUp(element); //runs function to animate
      }, 3000);
    }, 1000 * index); 
  });
};

The problem is setTimeout resets after I switch tabs on the browser and eventually the columns all animate at the same time. I've also tried pretty much every solution I found here and can't seem to figure out a way to make it work. I've been working on it for a while and I think the solution might be simple but I just can't see it. Thanks.

https://jsfiddle.net/dae0L0qu/3/

Answer 1

Just do it the other way. Each 3 seconds, set timeouts for all the logos at the appropriate times.

var startRotation = function() {
  otherInterval = setInterval(function(){ 
      $( ".ticker" ).each( function( index, element ){
        myInterval = setTimeout(function() { 
          slideImageUp(element); //runs function to animate
        }, 1000 * index); 
      });
  }, 3000);
};