Javascript 在较大的动画函数中，围绕3个小动画添加循环函数

下面是整个动画功能

我有一个更小的动画在这里面。基本上就是下面这三行代码（画了一个三角形）。我只想下面的执行3次

$('.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,

下面是完整的JS动画功能：我在最近尝试的地方添加了“

//注释”。基本上，尝试将一个循环3次的函数作为变量包装在这些行中，如果您查看底部的完整代码，您将看到。不确定是否因为涉及/嵌套了多少函数而导致语法错误

   function enterprise() {
       $('.medical-center .icon-1').addClass('caro-anim');
       //caro_icon();
       $('.conn').height(0).width(0);
        setTimeout(function(){
            medical_array.length = 0;
            uni_array.length = 0;
            children_array.length = 0;
                    var scale_time =3000;
                    $('.replay').hide();
                    $('.medical-text').addClass('scale-anim');
                    $('.medical-center').addClass('scale-anim').animate({margin: '-26% 0px -34%'}, scale_time,
                            function(){$(this).hide().show()}).siblings('.ferris').delay(scale_time/2).animate({opacity:1},scale_time/2,
                                function(){/* $('.connect-lines').animate({opacity:1},scale_time/2); */
                                    setTimeout(function(){
                                        pushArray(medical_array, '.medical-center');
                                        pushArrysa(uni_array,'.university-hospital');
                                        pushArray(children_array,'.childrens-hospital');
                                        var padding = $('.conn-1').css('padding');
                                        var line_anim = 700;
                                        $('.replay').hide();
                                        function animAll(remainingLoops){ // recent attempt
                                        if(!remainingLoops) return; // recent attempt
                                        $('.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();
                                                        animAll(remainingLoops-1); // recent attempt
                                                            }); // recent attempt
                                                          }); // recent attempt
                                                       });
                                                     }
                                                     animAll(3); // recent attempt
                                                  );
                                                }
                                              );
                                        //$('.conn-2').width(0).siblings('.connect-lines').css('margin',0);
                                         }, 2000);    
                                    });
                                 },5000);
                             }

最近的尝试如下所示。。但我认为嵌套函数或直接的数量可能会在上面的完整代码中导致语法问题

   function animAll(remainingLoops){ // recent attempt
                                if(!remainingLoops) return; // recent attempt
                                $('.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();
                                                animAll(remainingLoops-1); // recent attempt
                                                    }); // recent attempt
                                                  }); // recent attempt
                                               });
                                             }
                                             animAll(3); // recent attempt

如果操作正确，嵌套不应导致错误。读代码真的很难，但我猜这与代码的格式不正确有关，因为有些奇怪的地方超时时间与setTimeout不符。此外，在动画中，它设置宽度：100%，等等，但它从不将其设置回初始值。jQuery Animate不会重置变量，这就是为什么它看起来只运行一次，除非replay（）正在重置它。。。这就是为什么我要重播（）代码，我无法从显示的内容中找出问题所在

function enterprise() {
     $('.medical-center .icon-1').addClass('caro-anim');

     $('.conn').height(0).width(0);

     setTimeout(function () {
         medical_array.length = 0;
         uni_array.length = 0;
         children_array.length = 0;

         var scale_time = 3000;

         $('.replay').hide();
         $('.medical-text').addClass('scale-anim');

         $('.medical-center').addClass('scale-anim').animate({
             margin: '-26% 0px -34%'
         }, scale_time,

         function () {
             $(this).hide().show()
         }).siblings('.ferris').delay(scale_time / 2).animate({
             opacity: 1
         }, scale_time / 2,

         function () {
             setTimeout(function () {
                 pushArray(medical_array, '.medical-center');
                 pushArray(uni_array, '.university-hospital');
                 pushArray(children_array, '.childrens-hospital');
                 var padding = $('.conn-1').css('padding');
                 var line_anim = 700;
                 $('.replay').hide();

                 animAll(3);

                 function animAll(remainingLoops) {
                     if (!remainingLoops) return; 
                     $('.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();
                                 //reset all the .conn-* classes here
                                 //call the animAll again
                                 animAll(remainingLoops - 1);
                             });
                         }); 
                     });
                 }

             }, 2000);
         });

     }, 5000);
};

是正确格式化后的样子
在哪里定义了replay（）？您还有一个语法错误：pushArrysareplay works。。问题不是重演；问题是循环。即使减去语法错误，它仍然不起作用…我的意思是你可以发布replay（），我试图提供帮助，但仅仅说循环不起作用并没有真正的帮助。循环不起作用怎么办？我无法运行代码，所以充其量它将是我能看到的，主要是语法错误和明显的逻辑缺陷，但它仍然不会循环。有没有关于如何重置jQuery animate的想法？@LoydChristmas最简单的方法是在执行另一个animAll（）调用之前或在函数开始时将所有属性设置回初始值（无论它们是什么）