無限ループ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オブジェクトを汚染しないようにするために、すべてのあなたの機能を含む単一のオブジェクトを作成する必要がありますwindow.myLoops.loop_1();

重要：ドンもちろん

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

を、あなたは一度呼び出すことで、それらを開始する必要があります等しい持続時間の2つのループが同期していると期待していません。 2つのアニメーションを同期させたい場合は、両方の関数を同じ関数に配置するか、または他の関数のコールバックから各関数を呼び出すことで、1つのループでその関数を連結します。

Answer 2

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