jquery - jqueryのdivの設定間隔

Question

これは私のjquery prgです。私はこれを完全に処理し、画像を適切にアニメーション化しました。ここでは、最初の画像が 2 秒アニメーション化されて停止し、2 番目の画像がアニメーションを継続します。4 番目の画像がアニメーション化された後、最初の画像アニメーションを開始する必要があります。anim()関数を無限に呼び出したい。私を助けてください

私のスクリプトはjqueryにあり、showFirst、showSecond、showThird、showfourの4つの関数が含まれています

これは、時間間隔で4つの関数を呼び出すanim関数です

$(function anim() {

    $('div.f:not(:first)').hide(); // Hide all columns except the first
    $('div.s:not(:first)').hide(); // Hide all columns except the first
    $('div.c:not(:first)').hide(); // Hide all columns except the first
    $('div.d:not(:first)').hide(); // Hide all columns except the first
    // showFirst();

    var timesRun = 0;
    var interval = setInterval(function(){
        timesRun += 1;
        if(timesRun === 2){
            clearInterval(interval);

            var timesRun1= 0;
            var interval1 = setInterval(function(){
            timesRun1 += 1;
            if(timesRun1 === 2){
                clearInterval(interval1);

                var timesRun2 = 0;
                var interval2 = setInterval(function(){
                    timesRun2 += 1;
                    if(timesRun2 === 2){
                        clearInterval(interval2);
                        var timesRun3 = 0;
                        var interval3 = setInterval(function(){
                            timesRun3 += 1;
                            if(timesRun3 === 2){
                                clearInterval(interval3);
                            }
                            showFour();
                        }, 1000);
                    }
                    showSecond();   
                },1000); 
            }
            showThird();
        }, 1000); }showFirst();
    }, 1000);       
});

4 つの画像と 4 つの代替画像があります。2秒間隔で画像を変更しました。このコードを anim 関数で記述します。今私はanimの関数内で呼び出します。しかし、うまくいきません。

Answer 1

anim()残りのアニメーションが終了したら、もう一度電話してください

     if(timesRun3 === 2){
          clearInterval(interval3);
          anim();
     }

Answer 2