無限循環jQuery鏈接

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

您可以使用jQuery動畫的callback，並且可以使用下面的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]); 
    }); 
    });