较大的动画的功能中添加大约3个小动画的环路功能(add a loop function around

2019-10-23 06:44发布

下面是整个动画功能。

我在这个小动画。 它基本上是下面这些代码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

Answer 1:

如果使用得当嵌套应该不会导致错误。 这真的很难读你的代码,但我要猜测它的东西相关的代码格式不正确,因为有一些怪异的地方,超时时间是不与setTimeout的方式。 此外,在你的动画,它设置宽度:100%,等等。但它从来没有设置它恢复到初始值。 jQuery的动画不会重置变量这就是为什么它似乎只喜欢它的运行一次,除非重播()被重置它...这就是为什么我要求重播()的代码,我想不出任何东西,从什么是出了什么问题....

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);
};

是不是应该是什么样子正确格式化后



文章来源: add a loop function around 3 small animations within larger animation functions