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

Question

下面是整个动画函数。

我在其中有一个较小的动画。基本上就是下面这三行代码(绘制一个三 Angular 形)。我只是想让下面的代码执行 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 动画功能如下:我已经添加了我最近尝试的位置的“//comments”。基本上，尝试将一个作为变量循环 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

Answer 1

如果做得正确，嵌套不应导致错误。阅读你的代码确实很难，但我猜它与代码格式不正确有关，因为有一些奇怪的地方超时时间与 setTimeout 不符。另外，在您的动画中，它设置宽度:100% 等，但它永远不会将其设置回初始值。 jQuery Animate 不会重置变量，这就是为什么它看起来只运行一次，除非 replay() 正在重置它...这就是为什么我要求 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);
};

正确格式化后的样子