Question

感觉我在这里忽视了明显的......

我已经设置了几个vars：

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？

Answer 1

你需要从前一个结束时关闭每一个。因此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);
    }

Answer 2

// 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 3

如果您想要按顺序触发动画，那么您应该从完整的回调函数中调用下一个动画。例如：

 $(".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");

jQuery动画功能计时

3 个答案: