Question

以下是整个动画功能。

我有一个较小的动画。基本上这三行代码（绘制三角形）。我只想让下面的内容执行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没有重置变量，这就是为什么它似乎只运行一次，除非重放（）重置它...这就是为什么我要求重播（）代码，我不能找出问题所在的东西......

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

是正确格式化后的样子

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

1 个答案: