Jquery 在元素中添加动画

我正在开发一个简单的应用程序，它在一个元素中传输一个元素。 所以我有两组形状，正方形和圆形。首先我必须选择一个圆，然后是一个正方形，当我点击一个正方形时，我选择的圆圈将在正方形内移动。代码运行良好，只是，我必须添加动画，就像圆圈在我选择的正方形内移动一样

希望你能理解我

谢谢

$（'.circle'）。单击（函数（）{
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
所选变量=$（此值）；
$（'.container.square'）。单击（函数（）{
$（this.addClass（'selected'）；
$（this.html）（选中）；
});
});
.container{
高度：230像素；
宽度：110px；
背景色：#eee；
填充：10px；
位置：相对位置；
边框：1px实心#DDD；
}
.轮{
位置：绝对位置；
底部：10px；
}
.广场{
光标：指针；
显示：内联块；
宽度：50px；
高度：50px；
边框：1px实心#f60；
位置：相对位置；
}
.正方形.圆形{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
}
.圆圈{
光标：指针；
显示：内联块；
宽度：45px；
高度：45px；
边框：1px纯绿色；
边界半径：100px；
文本对齐：居中；
位置：相对位置；
}
.圆跨度{
宽度：10px；
高度：20px；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
保证金：自动；
}
.circle.selected{
背景色：#FFFF；
}

1.
2.
3.
4.
您可以在css转换中使用
@关键帧
下面有一个示例，它尚未优化，或者我的意思是未正确实现，但您可以看到它是如何工作的。非常感谢


$（'.circle'）。单击（函数（）{
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
所选变量=$（此值）；
$（'.container.square'）。单击（函数（）{
$（this.addClass（'selected'）；
$（this.html）（选中）；
});
});
.container{
高度：230像素；
宽度：110px；
背景色：#eee；
填充：10px；
位置：相对位置；
边框：1px实心#DDD；
}
.轮{
位置：绝对位置；
底部：10px；
}
.广场{
光标：指针；
显示：内联块；
宽度：50px；
高度：50px；
边框：1px实心#f60；
位置：相对位置；
}
.正方形.圆形{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
}
.圆圈{
光标：指针；
显示：内联块；
宽度：45px；
高度：45px；
边框：1px纯绿色；
边界半径：100px；
文本对齐：居中；
位置：相对位置；
}
.圆跨度{
宽度：10px；
高度：20px；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
保证金：自动；
}
.circle.selected{
背景色：#FFFF；
动画：操动5s；
}
@关键帧操动{
从{top:200px；}
到{top:0px；}
}

1.
2.
3.
4.
我想您正在寻找下面的代码片段

问题是，你不知道你的圆在哪里，它必须去哪里。
$selected.offset（）
是元素在屏幕上的位置，它使用
位置：fixed
将圆放置在屏幕上与原来相同的位置

然后，动画确保将圆从其新位置设置为屏幕上正方形的位置（因此出现
$this.offset
，即正方形的位置）


var$body=$（'body'），
$selected；
$（'.round.circle'）。单击（函数（）{
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
$selected=$（此项）；
});
$（'.container.square'）。单击（函数（）{
如果（$selected）{
var$this=$（this）；
$selected.css({
顶部：$selected.offset（）.top，
左：$selected.offset（）.left，
位置：'绝对'
}).appendTo（$body）。设置动画({
顶部：$this.offset（）.top+2，
左：$this.offset（）.left+2
}，1000，函数（）{
$（this.css）({
位置：'绝对'，
顶部：“自动”，
左：“自动”，
}).appendTo（$this）；
});
$this.addClass（'selected'）；
}
$selected=未定义；
});
.container{
高度：300px；
宽度：110px；
背景色：#eee；
填充：10px；
位置：相对位置；
边框：1px实心#DDD；
}
.轮{
位置：绝对位置；
底部：10px；
}
.广场{
光标：指针；
显示：内联块；
宽度：50px；
高度：50px；
边框：1px实心#f60；
位置：相对位置；
}
.正方形.圆形{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
}
.圆圈{
光标：指针；
显示：内联块；
宽度：45px；
高度：45px；
边框：1px纯绿色；
边界半径：100px；
文本对齐：居中；
位置：相对位置；
}
.圆跨度{
宽度：10px；
高度：20px；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
保证金：自动；
}
.circle.selected{
背景色：#FFFF；
}

1.
2.
3.
4.
到目前为止，您尝试过什么？我尝试过添加动画，因为我的问题是方向不规则，我无法特别在对角线方向移动元素这不是CSS应该能够做到的，但可以通过JavaScript实现。我添加了一个有效的答案！漂亮的关键帧名称这里有一个替代方案：因为Douwe de Haan提出的解决方案遵循用户滚动，因为元素具有固定的position@Mark托马斯是对的。我忘了滚动。如果我今天有时间，我会更新我的答案，以确保它在页面上的任何位置都有效@马克：我更新了我的代码。它现在应该与滚动页面一起工作！