Javascript jQuery中的循环嵌套动画函数

所以我想转换这个代码：

$('.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(){

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

去做一些不那么愚蠢的事。因为我要花1年的时间才能完成，而且因为它有很多代码，我认为它可以通过一个循环来解决

我希望动画函数属性

left

始终保持不变

+=20px

。属性

top

从

-20px

开始，增加到

180px

，然后再次减少到

180px

，并在

（窗口宽度）/20

循环后结束

这可能吗？

---

感谢您并对noob问题表示歉意（：

您可以使用类似的方法。根据需要更改if条件

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

---

您可以使用类似的循环

jQuery（函数（$）{
$（“按钮”）。单击（函数（）{
var top=20，
符号=-1；
动漫（）；
函数anim（）{
$（'.spawn_worm'）。设置动画({
左：'+=20px'，
顶部：（符号==1？'+'：'-'）+'='+top+'px'
}，100，“线性”，函数（）{
if（符号*顶部<16）{
顶部+=2*号；
如果（！顶部）{
符号=1；
}
动漫（）；
}
});
}
});
})；

正文{
高度：1000px；
利润上限：200px；
}
.ct{
位置：相对位置；
高度：500px；
}
.产卵虫{
高度：50px；
位置：绝对位置；
背景色：红色；
显示：内联块；
宽度：50px；
}

试验