jquery - JQuery スクリプトがループを達成できない

Question

このスクリプトをループさせようとしていますが、できません。

$(document).ready(function inout() {
    $('#review1').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#review2').delay(3500).fadeIn(1500).delay(3500)
     });

Answer 1

もしreview1をfadeIn、次にfadeOut、次にreview2をfadeIn、そしてfadeOutを間に遅延させたい場合は、次のようにすることができます。

$(document).ready(function inout() {
    function cycle() {
        $('#review1').fadeIn(1500).delay(3500).fadeOut(1500, function() {
            $('#review2').delay(3500).fadeIn(1500).delay(3500).fadeOut(1500, function() {
                setTimeout(cycle, 1500);
            });
        });
    }

    cycle();
});

これは、個別のアニメーションをリンクするために jQuery アニメーション完了関数を使用して、一方が他方の完了後に開始するようにします。これらは非同期アニメーションであるため、通常のシーケンシャル プログラミングだけを使用することはできません。