javascript - jQuery 中的循环嵌套动画函数

Question

所以我想转换这段代码:

$('.spawn_worm').animate({
    left: '+=20px',
    top: '-=20px'
},100, "linear", function(){
    $('.spawn_worm').animate({
        left: '+=20px',
        top: '-=16px'
    },100, "linear", function(){
        $('.spawn_worm').animate({
            left: '+=20px',
            top: '-=12px'
        },100, "linear", function(){
            $('.spawn_worm').animate({
                left: '+=20px',
                top: '-=8px'
            },100, "linear", function(){
                $('.spawn_worm').animate({
                    left: '+=20px',
                    top: '-=4px'
                },100, "linear", function(){
                    $('.spawn_worm').animate({
                        left: '+=20px',
                        top: '+=0px'
                    },100, "linear", function(){
                        $('.spawn_worm').animate({
                            left: '+=20px',
                            top: '+=4px'
                        },100, "linear", function(){
                            $('.spawn_worm').animate({
                                left: '+=20px',
                                top: '+=8px'
                            },100, "linear", function(){
                                $('.spawn_worm').animate({
                                    left: '+=20px',
                                    top: '+=8px'
                                },100, "linear", function(){
                                    $('.spawn_worm').animate({
                                        left: '+=20px',
                                        top: '+=12px'
                                    },100, "linear", function(){
                                        $('.spawn_worm').animate({
                                            left: '+=20px',
                                            top: '+=16px'
                                        },100, "linear", function(){

                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});

做一些不那么愚蠢的事情。因为我需要大约一年的时间才能完成这个任务，而且代码很多，我认为可以用循环来解决。

我希望 animate 函数属性 left 始终保持相同的 +=20px。属性 top 从 -20px 开始并增加到 180px，然后再次减少到 180px 并在之后完成(window.width)/20 循环。

这可能吗？谢谢您，并对菜鸟问题表示歉意(:

Answer 1

你可以使用这样的东西。根据您的需要更改 if 条件。

var count = parseInt(window.innerWidth/20);
function animateElement(){
    if(count){
        $('.spawn_worm').animate({
            left: '+=20px',
            top: '-=20px'
        }, 100, animateElement);
        count--;
    }
}
animateElement();