Question

我想知道是否可以保留类似的格式并为简单的jQuery链动画设置无限循环，如下所示。

  $('.learnwhat').delay(500).fadeIn(1500);
  $('.learnwhat').delay(2000).fadeOut(500);
  $('.seeresults').delay(5000).fadeIn(1500);
  $('.seeresults').delay(500).fadeOut(500);
  $('.personalsolution').delay(9000).fadeIn(1500);
  $('.personalsolution').delay(500).fadeOut(500);

Answer 1

大多数jQuery动画都接受callback作为最后一个参数。无论你放什么，都要求完成动画。您需要做的就是将动画命名为变量并从动画回调中调用它们。通用示例：

var looping = function() {
   $('.learnwhat').delay(500).fadeIn(1500, looping());
}

以上应该有效。如果它不是因为外部范围在功能范围内不可用，但您始终可以使用window.looping和（window.looping()）。为了不污染window对象，您应该创建一个包含所有函数的对象：

var window.myLoops = {
    loop_1:function() {
       $('.learnwhat').delay(500).fadeIn(1500, window.myLoops.loop_2());
    },
    loop_2:function() {
       $('.learnwhat').delay(500).fadeIn(500, window.myLoops.loop_1());
    }
}

当然，您需要通过拨打一次来启动它们：window.myLoops.loop_1();

重要提示：不要期望两个持续时间相同的循环保持同步。如果你想要同步两个动画，你想要将它们放在同一个函数中，或者通过从另一个函数的回调中调用每个函数将它们的函数链接到一个循环中。

Answer 2

您可以使用callback jQuery动画，并可以使用下面的generic方法来减少代码。

function animateFade(elm, timers, cb) {
     var index = 0;
     var animateFn = function() {
       if(timers.length > index) {
          var timer = timers[index++];
          elm.delay(timer[0]).fadeIn(timer[1], animateFn);
       } else if(cb && typeof cb === 'function') {
          cb();
       }
     };

     animateFn();
  }

  // Change the timer values here
  animateFade($('.learnwhat'), [[500, 1500], [2000, 500]);
  animateFade($('.seeresults'), [[5000, 1500], [500, 500]);
  animateFade($('.personalsolution'), [[9000, 1500], [500, 500]);

  // or even if you want to chain them one after another
  animateFade($('.learnwhat'), [[500, 1500], [2000, 500], function() {
     animateFade($('.seeresults'), [[5000, 1500], [500, 500], function() {
        animateFade($('.personalsolution'), [[9000, 1500], [500, 500]);
     });
  });

无限循环jQuery链接

2 个答案: