Question

Feel like I’m overlooking the obvious here…

I’ve got several vars set up like so:

var productOne = function () {
          $(".product2").fadeIn(200).animate({"right": "+=75px"}, 500, "easeOutElastic").delay(3000).fadeOut(200).css("right", "0");
          $(".product-text.two").fadeIn(200).delay(3500).fadeOut(200);
        }

var productTwo = function () {
          $(".product2").fadeIn(200).animate({"right": "+=75px"}, 500, "easeOutElastic").delay(3000).fadeOut(200).css("right", "0");
          $(".product-text.two").fadeIn(200).delay(3500).fadeOut(200);
        }

etc…Then I want to fire them in order, like so, and loop back to the first:

       window.setInterval(function() {
          $(productTwo);
          $(productThree);
          //and so on
      }, 5000);

but they all fire at the same time. How can I put a specific number of ms between each function call?

Answer 1

You need to fire each one off from the end of the previous one. So productOne would setTimeout to call productTwo, and productRwo would setTimeout to call productThree, and productThree to call productOne.

ETA Example:

var productOne = function () {
      $(".product2").fadeIn(200).animate({"right": "+=75px"}, 500, "easeOutElastic").delay(3000).fadeOut(200).css("right", "0");
      $(".product-text.two").fadeIn(200).delay(3500).fadeOut(200);
      setTimeout(productTwo, 5000);
    }

var productTwo = function () {
      $(".product2").fadeIn(200).animate({"right": "+=75px"}, 500, "easeOutElastic").delay(3000).fadeOut(200).css("right", "0");
      $(".product-text.two").fadeIn(200).delay(3500).fadeOut(200);
      setTimeout(productThree, 5000);
    }