在较大的动画函数中为3个小动画添加循环函数

add a loop function around 3 small animations within larger animation functions

本文关键字：动画 函数 3个 添加 循环      更新时间：2023-09-26

下面是整个动画函数。

我有一个较小的动画。它基本上是下面这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动画功能:我已经添加了' // 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

嵌套如果操作得当，应该不会导致错误。这真的很难阅读你的代码，但我猜它的方式有关的代码没有正确格式化，因为有一些奇怪的地方，超时时间没有与setTimeout。同样，在你的动画中，它设置了宽度:100%等，但它从来没有设置回初始值。jQuery动画不会重置变量，这就是为什么它看起来只运行一次，除非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);
};

是正确格式化后的样子

相关文章：