jQuery简单动画行循环3次

loop jQuery simple animated lines 3 times

本文关键字：循环 3次 动画 简单 jQuery      更新时间：2023-09-26

更新:由于我的问题含糊不清-导致了一个广泛的答案，并不真正适用(如下所示)。我的完整问题和问题转移到-->在较大的动画函数中添加3个小动画的循环函数

如何定义以下内容在停止前连续循环/播放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>

相关文章：