Javascript 使用.animate移动css形状

我试图用css、jquery和html为学校制作一个图形演示，我需要一个矩形在屏幕上移动。我做了一些研究，并尝试使用了

animate

函数的几种变体，但没有成功，它只位于窗口的左侧

以下是我的代码供参考：

var-derp=20；
函数滚动（）{
var scrollLeft=Math.floor（Math.random（）*100）；
$（“#矩形”）。设置动画({
左：向左滚动“px”，
}，derp，function（）{
滚动（）；
});
}
设置间隔（100，滚动（））
html，
身体{
宽度：100%；
身高：100%；
最小高度：100%；
}
身体{
背景图片：url（“background.jpg”）；
背景重复：无重复；
背景位置：右上角；
背景尺寸：封面；
}
.矩形{
宽度：20px；
身高：100%；
背景：黑色；
}
#长方形{
左：10px；
位置：绝对位置；
}
img，
分区，
P
身体{
边际：0px；
填充0px；
}
您只能使用CSS来完成此操作


div{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
动画：动画3向前交替；
动画迭代次数：6次；
}
@关键帧动画{
从{
左：0px；
}
到{
左：200px
}
}
您只能使用CSS来完成此操作


div{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
动画：动画3向前交替；
动画迭代次数：6次；
}
@关键帧动画{
从{
左：0px；
}
到{
左：200px
}
}
我想我可能遗漏了一些关于jquery的内容，但我不确定您是否有一个语法错误。检查浏览器的开发控制台（按F12键，然后单击“控制台”），查看它位于哪一行。另外，不是语法错误而是逻辑错误，行
setInterval（100，scroll（））应该是
setInterval（滚动，100）
，即先是函数名（后面没有括号），然后是毫秒延迟。此外，从
.animate（）
完成回调内部调用
scroll（）
以及使用
setInterval（）也没有意义
。我想我可能遗漏了一些关于jquery的内容，但我不确定您是否有一个语法错误。检查浏览器的开发控制台（按F12键，然后单击“控制台”），查看它位于哪一行。另外，不是语法错误而是逻辑错误，行
setInterval（100，scroll（））应该是
setInterval（滚动，100）
，即先是函数名（后面没有括号），然后是毫秒延迟。此外，从
.animate（）
完成回调内部调用
scroll（）
，以及使用
setInterval（）
，也没有任何意义。但是OP有
Math.floor（Math.random（）*100）
对于新职位……这只是看看它是否会移动@nnnnnn@V3ngence91-我们可以做出有根据的猜测，但我们无法理解您的想法，因此认为您包含
.random（）
代码并不是不合理的，因为您实际上想要一个随机运动。如果这仅仅是为了测试，你应该编辑你的问题，使之清楚（也许在那一点上给代码添加注释），并清楚地解释你真正想要的是什么。@Gerard感谢这起作用。无论如何，有一个处理方法可以在n个时间内重复它使用
infinite
到
animation:anim 5s infinite forwards
如果你需要一段时间，使用no.比如4或者你想要的其他一些。但是OP有
Math.floor（Math.random（）*100）
用于新位置…这只是为了看看它是否会移动@nnnnnn@V3ngence91-我们可以做出有根据的猜测，但我们无法读懂您的想法，因此认为您包含了
.random（）
code，因为您实际上想要随机移动。如果这仅仅是为了测试，你应该编辑你的问题，使之清楚（也许在那一点上给代码添加注释），并清楚地解释你真正想要的是什么。@Gerard感谢这起作用。无论如何，有一个处理方法可以在n个时间内重复它使用
infinite
到
animation:anim 5s infinite forwards如果你需要一定数量的时间，使用4号或其他你想要的时间。