Question

更新：由于我的问题模糊不清 - 导致广泛的答案并不真正适用（如下所示）。我的完整问题和问题已移至 - ＆gt; 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);

}

Answer 1

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>

循环jQuery简单动画线3次

1 个答案: