Javascript 设置附加到列表的动画

在理想情况下，如何使用jqueryanimate设置从一个列表移动到另一个列表的动画？给定以下代码，我知道我应该能够使用animate将listitem移动到它将在接收列表中占据的位置。。。但是我如何获得坐标，并将它们转换为css值呢

$（'list1'）。在（'click'，'li'，function（）上{
//$（此）。设置动画（？？？）
$（this）.appendTo（$（'#list2'）；
})
$（'#list2'）。在（'click'，'li'，function（）上{
//$（此）。设置动画（？？？）
$（this）.appendTo（$（'#list1'）；
})

ul{
背景颜色：灰色；
颜色：黑色；
填充：10px；
利润率：50像素；
宽度：20%；
显示：内联块；
}

一个
两个
三


四
五
六

现在是星期六晚上（当地时间），我想帮助某人，我认真考虑了您的问题，并在下面的每个步骤中提供了一个示例和解释

本例中最重要的是使用绝对定位的列表元素（在本例中为

#animatedList

），以便此动画列表元素不会与其他元素交互。此外，要获得正确的坐标，还必须考虑原始元素的边距/填充

您必须单击“RunCodeSnippet”按钮来执行此示例。希望这对您有所帮助：

$（'list1'）。在（'click'，'li'，function（）上{
var startElement=$（本）；
变量endElement=$（“#列表2”）；
startAnimation（startElement、endElement）；
})
$（'#list2'）。在（'click'，'li'，function（）上{
var startElement=$（本）；
变量endElement=$（“#列表1”）；
startAnimation（startElement、endElement）；
})
功能startAnimation（startElement、endElement）{
var clickedListElement=startElement；
//将原始元素的内容复制到动画列表元素中
var contentCopy=clickedListElement.text（）；
var startCoords=getCoordsOfElement（clickedListElement）；
//如果没有li元素，则取整个列表的位置，否则取最后一个列表元素
var endCoords；
if（endElement.find（'li:last'）.length）endCoords=getCoordsOfElement（endElement.find（'li:last'））；
else-endCoords=getCoordsOfElement（endElement）；
//隐藏原始元素，因为将显示动画列表元素
css（'visibility'，'hidden'）；
showAnimation（contentCopy、StartWord、endCoords、function（）{
//最后一步：将原始元素复制到其目标并再次显示，因为动画已结束
clickedListElement.appendTo（endElement.css（'visibility'，'visible'）；
});
}
函数getCoordsOfElement（元素）{
var endCoords=element.offset（）；
//因为这些列表的边距和填充扭曲了计算的位置，所以必须考虑它们
//所以我们把它们减去左上角
var marginOffsetTop=50；
endCoords.top-=marginOffsetTop；
var marginOffsetLeft=50；
endCoords.left-=marginOffsetLeft；
//填充也会发生同样的情况
var paddingOffsetTop=10；
endCoords.top-=填充偏移设置顶部；
var paddingOffsetLeft=10；
endCoords.left-=填充偏移设置left；
返回端坐标；
}
函数showAnimation（contentCopy、startWord、endCoord、回调）{
变量列表=$（“#animatedList”）；
//将原始元素的文本复制到动画列表元素中
list.find（'li'）.text（contentCopy）；
//将动画列表/元素设置在与原始单击元素相同的位置
css（'top'，startcood.top+'px'）.css（'left'，startcood.left+'px'）.show（）；
制作动画({
top:endCoord.top+'px'，
左：endCoord.left+'px'
}，1000，函数（）{
//动画在此完成
list.hide（）；
回调（）；
});
}

ul{
背景颜色：灰色；
颜色：黑色；
填充：10px；
利润率：50像素；
宽度：20%；
显示：内联块；
}
#动画列表{
显示：无；
位置：绝对位置；
}

一个
两个
三


四
五
六

你能解释一下你想要从css中得到什么输出吗？请给我一个反馈，看看这是否满足了你的要求。谢谢，太棒了！非常感谢。工作是一种享受。。唯一的问题是，当动画发生时，我丢失了样式（至少在我的代码中，似乎将它们保留在这里）。也许我在css中遗漏了一些东西，但可能是因为它正在响应socket.io“move”事件来调用动画，而且我的LIs非常复杂，其中可能包含许多div和样式？欢迎！是的，当列表比本例中更复杂时，您必须根据自己的要求扩展或修改#animatedList的样式，但我相信您已经克服了这一点。如果你能将我的答案标记为正式答案，那就太好了。很高兴：）我接受了答案！代码复制.text元素的事实是否会影响样式设置。。。我的意思是，文本是捕获所有儿童还是将其分解并删除？谢谢。文本只复制列表元素或其子元素的“文本”，而不复制元素本身。您还可以使用.html来复制文本，也可以复制所有子项。