JQuery функция анимации времени

Question

Чувствую, что я упускаю из виду очевидное ...

У меня есть несколько настроек, настроенных так:

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

и т. Д. ... Тогда я хочу выстрелитьих по порядку, вот так, и вернитесь к первому:

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

, но все они стреляют одновременно.Как я могу поставить определенное количество мс между каждым вызовом функции?

Answer 1

// initial product count
var product = 1;

// function which select which animation to call
function fire_product( product ) {

    switch ( product ) {

        case 1:
            $(productTwo);
            break;

        case 2:
            $(productTwo);
            break;

        case 3:
            $(productThree);
            break;

    }

    // go to next product next time
    product++;

    // reset to first product when we reach the last product
    if (product > 3) product = 1;

    // self-call this function again
    setTimeout( function() {
        fire_product( product );
    }, 5000);

}

// call the function for the first time with desired parameter
fire_product( 1 );

Answer 2

Если вы хотите, чтобы анимации запускались по порядку, вам следует вызвать следующую из полной функции обратного вызова.Пример:

 $(".product2").fadeIn(200).animate(
    {"right": "+=75px"}, 
    500, 
    "easeOutElastic",
     function() {
    // call your next animation here.  Add delays here if you want...
  }).delay(3000).fadeOut(200).css("right", "0");

Answer 3

Вам нужно уволить каждого с конца предыдущего.Таким образом, productOne будет устанавливать TimeTime для вызова productTwo, а productRwo будет устанавливать TimeTimeout для вызова productThree и productThree для вызова productOne.

ETA Пример:

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