Javascript 使用jQuery设置动画时偏移元素

我正在制作一个动画页面，包含3个元素，它们在svg行上移动，但我不知道为什么，它们相互抵消。我认为这是jQuery中的问题，但是如何解决这个问题

有一个 JQUERY

---

当你说

left

时，它表示圆的边框的左边。不是圆中心点的左侧。你需要考虑圆的宽度。例如，圆心是

左+宽/2

我强烈建议您使用SVG

正在沿元素的左上角为元素设置动画。它看起来只是一个圆，因为您这样设置了它的样式

要更正此问题，可以使用负边距偏移元素，使其中心位于要设置动画的路径中。你的外圆是32px，所以使用-16px a作为边距。然后，通过将内部元素的边距偏移16px的一半来校正它们

我让圆一没有边界半径，也没有边距，所以你可以看到元素的左上角是如何沿着直线的


$（文档）.ready（函数（）{
//第一圈
$（“.circle-1”）.animate（{left:'0%'，top:'0%}，5000）；
$（“.circle-1”）.animate（{左：“100%”，右：“0”，上：“50%”），5000）；
$（“.circle-1”）.animate（{left:'0'，right:'0'，top:'100%}，5000）；
$（“.circle-1”）.animate（{left:'100%”，right:'0'，top:'0'}，5000）；
$（“.circle-1”）.animate（{left:'50%'，right:'0'，top:'100%}，5000）；
//第二圈
$（“.circle-2”）.animate（{left:'50%'，right:'0'，top:'0%}，5000）；
$（“.circle-2”）.animate（{左：“100%”，右：“0”，上：“100%”，5000）；
$（“.circle-2”）.animate（{left:'0%'，right:'0'，top:'50%'，5000）；
$（“.circle-2”）.animate（{left:'100%'，right:'0'，top:'0%'，5000）；
$（“.circle-2”）.animate（{left:'0%'，right:'0'，top:'100%'，5000）；
//第三圈
$（“.circle-3”）.animate（{left:'0%'，right:'0'，top:'0%'，5000）；
$（“.circle-3”）.animate（{左：“100%”，右：“0”，上：“50%”），5000）；
$（“.circle-3”）.animate（{left:'0%'，right:'0'，top:'100%'，5000）；
$（“.circle-3”）.animate（{left:'50%'，right:'0'，top:'0%'），5000）；
$（“.circle-3”）.animate（{左：“100%”，右：“0”，上：“100%”，5000）；
});
html{
宽度：100%；
身高：100%
}
身体{
宽度：100%；
身高：100%；
溢出：隐藏
}
.第页{
宽度：100%；
身高：100%；
位置：相对位置；
显示器：flex；
对齐项目：居中；
/*背景图像：url（'../images/grid.svg'）*/
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
背景色：#0099ff；/*旧浏览器*/
背景色：-moz线性渐变（顶部，#0099ff 0%，#085c8b 100%）；/*FF3.6-15*/
背景色：-webkit线性渐变（顶部，#0099ff 0%，#085c8b 100%）；/*铬10-25，Safari5.1-6*/
背景色：线性渐变（至底部，#0099ff 0%，#085c8b 100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#0099ff'，endColorstr='#085c8b'，GradientType=0）；/*IE6-9*/
}
.页面.徽标{
宽度：257px；
高度：54px；
背景图像：url（../images/logo.svg）；
背景重复：无重复；
背景大小：100%；
位置：绝对位置；
顶部：40px；
左：120px；
}
.内容{
颜色：白色；
位置：相对位置；
宽度：100%；
文本对齐：居中；
}
.内容.标题{
字号：100；
字体大小：72px；
}
.内容.副标题{
字号：28px；
}
.第页.行{
宽度：100%；
身高：100%；
z指数：1；
}
.佩奇.动漫元素{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：10；
}
.页面.动画元素.圆圈{
显示器：flex；
对齐项目：居中；
位置：绝对位置；
背景：rgba（255，255，255，0.25）；
宽度：32px；
高度：32px；
边界半径：100%；
/*转换：转换（-32px）*/
保证金：-16px-16px
}
.页.动画元素.圆圈：之后{
内容：''；
背景：白色；
内容：''；
背景：白色；
宽度：14px；
高度：14px；
边界半径：100%；
位置：绝对位置；
保证金：8px 8px；
左：0；
右：0；
}
.page.anim elem.circle.circle-1{
最高：100%；
左：50%；
边界半径：0%！重要；
边距：0！重要；
}
.page.anim elem.circle.circle-2{
最高：100%；
左：0%；
}
.page.anim elem.circle.circle-3{
最高：100%；
左：100%；
}

当您说
left
时，它表示
圆的边界矩形的左侧。不是圆中心点的左侧。你需要考虑圆的宽度。例如，圆心是
左侧
+
宽度/2
。我强烈建议您使用SVG
谢谢，现在它与path和
animateMotion
    $(document).ready(function() {
        // FIRST CIRCLE
        $(".circle-1").animate({left: '0%', top: '0%'}, 5000);
        $(".circle-1").animate({left: '100%', right: '0', top: '50%'}, 5000);
        $(".circle-1").animate({left: '0', right: '0', top: '100%'}, 5000);
        $(".circle-1").animate({left: '100%', right: '0', top: '0'}, 5000);
        $(".circle-1").animate({left: '50%', right: '0', top: '100%'}, 5000);
        // SECOND CIRCLE
        $(".circle-2").animate({left: '50%', right: '0', top: '0%'}, 5000);
        $(".circle-2").animate({left: '100%', right: '0', top: '100%'}, 5000);
        $(".circle-2").animate({left: '0%', right: '0', top: '50%'}, 5000);
        $(".circle-2").animate({left: '100%', right: '0', top: '0%'}, 5000);
        $(".circle-2").animate({left: '0%', right: '0', top: '100%'}, 5000);
        // THIRD CIRCLE
        $(".circle-3").animate({left: '0%', right: '0', top: '0%'}, 5000);
        $(".circle-3").animate({left: '100%', right: '0', top: '50%'}, 5000);
        $(".circle-3").animate({left: '0%', right: '0', top: '100%'}, 5000);
        $(".circle-3").animate({left: '50%', right: '0', top: '0%'}, 5000);
        $(".circle-3").animate({left: '100%', right: '0', top: '100%'}, 5000);
    });