loop jQuery простые анимированные строки 3 раза

Question

Обновление: Из-за неопределенности моего вопроса - в результате получился широкий ответ, который на самом деле не применяется (как вы можете видеть ниже). Мой полный вопрос и проблема мигрировали ->add a loop function around 3 small animations within larger animation functions

---

Как определить ниже контура/воспроизведения конкретно 3 раза подряд до остановки (простой строки анимации с JQuery):

Мои анимации работ .. это в основном три строки, которые выходят по одному за раз, которые рисуют треугольник ... Это цикл, который мне нужен 3 раза.

var padding = $('.conn-1').css('padding'); 
    var line_anim = 700; 
    $('.replay').hide(); 
    $('.conn-1').width('100%').animate({'height':'100%'},line_anim, 
    function() { 
     $('.conn-2').height('100%').animate({'width':'100%'}, line_anim, 
      function() { 
       $('.conn-3').css({width:'100%'}).animate({'height':'100%'}, line_anim, 
         function(){replay();}) 
      } 
     ); 
    } 
    ); 
    //$('.conn-2').width(0).siblings('.connect-lines').css('margin',0); 
    }, 2000);  
    }); 
    },5000); 

    } 

Обновленный код через ответные предложения - ниже не работал/работал с циклом; любые дополнительные мысли?

         function animAll(remainingLoops){ 
             if(!remainingLoops) return; 
            $('.replay').hide(); 
            $('.conn-1').width('100%').animate({'height':'100%'},line_anim, function() { 
            $('.conn-2').height('100%').animate({'width':'100%'}, line_anim, function() { 
            $('.conn-3').css({width:'100%'}).animate({'height':'100%'}, line_anim, function(){ 
               animAll(remainingLoops-1); 
               // replay();}) 
                }); 
                }); 
               } 
              ); 
             } 
            ); 
            //$('.conn-2').width(0).siblings('.connect-lines').css('margin',0); 
           }, 2000);  
          }); 
    },5000); 

} 

Answer 1

function animAll(remainingLoops){ 
 
    if(!remainingLoops) return; 
 
    $('#blue').width(50).animate({width: '100%'}, function(){ 
 
     $('#red').width(50).animate({width: '100%'}, function(){ 
 
      $('#green').width(50).animate({width: '100%'}, function(){ 
 
       animAll(remainingLoops-1); 
 
      }); 
 
     }); 
 
    }); 
 
} 
 

 
animAll(3);

div{height:50px;background:#00f}#red{background:red}#green{background:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="blue"></div> 
 
<div id="red"></div> 
 
<div id="green"></div>