javascript - jQuery动画功能计时

感觉像我忽略了这里明显的东西...

我已经像这样设置了几个变量：

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

但他们都同时射击。如何在每个函数调用之间放置特定数量的ms？

最佳答案

您需要从上一个末尾解雇每个人。因此productOne将setTimeout调用productTwo，而productRwo将setTimeout调用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);
    }

关于javascript - jQuery动画功能计时，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6681552/