javascript - 循环jQuery简单动画线3次

更新：由于我的问题含糊不清-产生了一个实际上并不适用的广泛答案（如下所示）。我的完整问题已迁移至-> add a loop function around 3 small animations within larger animation functions



如何定义以下内容以在停止之前连续播放/连续播放3次（使用jQuery制作简单的动画）：

我的动画起作用了..基本上一次绘制一条三角形的三条线...这是我需要的3次循环。

    var padding = $('.conn-1').css('padding');
    var line_anim = 700;
    $('.replay').hide();
    $('.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();})
            }
        );
    }
    );
    //$('.conn-2').width(0).siblings('.connect-lines').css('margin',0);
    }, 2000);
    });
    },5000);

    }

通过已回答的建议更新了代码-下列代码未在循环中运行/运行；还有其他想法吗？

                                      function animAll(remainingLoops){
                                      if(!remainingLoops) return;
                                    $('.replay').hide();
                                    $('.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(){
                                               animAll(remainingLoops-1);
                                               // replay();})
                                                     });
                                                  });
                                                }
                                            );
                                        }
                                    );
                                    //$('.conn-2').width(0).siblings('.connect-lines').css('margin',0);
                                }, 2000);
                            });
    },5000);

}

最佳答案

function animAll(remainingLoops){
    if(!remainingLoops) return;
    $('#blue').width(50).animate({width: '100%'}, function(){
        $('#red').width(50).animate({width: '100%'}, function(){
            $('#green').width(50).animate({width: '100%'}, function(){
                animAll(remainingLoops-1);
            });
        });
    });
}

animAll(3);

div{height:50px;background:#00f}#red{background:red}#green{background:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>

关于javascript - 循环jQuery简单动画线3次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30606587/