Jquery 设置浮动动画：可视化位置更改

我有一个可以垂直和水平显示的项目列表：

目前，在这两种模式之间切换会带来相当不和谐的用户体验，因为项目的重新定位非常突然（因为CSS类正在应用/删除）。让每个项目逐渐移动到新的位置会有很大帮助，让用户更容易保持方向感

我知道jQuery的动画方法不适用于float。虽然我可以想象一个解决方案，但它似乎相当复杂：

• 创建每个项目的不可见克隆
• 应用所需样式（垂直/水平）
• 记录克隆人的新位置
• 删除克隆
• 将实际项目设置为记录位置的动画
• 将所需样式应用于实际项目
• 从动画中删除内联样式

---

在我开始重新发明轮子之前，类似的东西已经存在了吗？

对于初学者，在为

.toggleClass（）

调用添加jquery库之后，您需要立即添加jqueryui库来设置动画

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

这会让你更接近你想要的东西

---

祝你好运，你可能会喜欢的插件是同位素。同位素将使用CSS3对内容块重新排序，并退回到jquery动画。请访问：

+1有趣的概念，我也想知道这一点您的意思是

switchClass

？我会尝试一下，尽管我不是很有希望。不管怎样，谢谢！是的，问题是浮点不是一个数值，它要么是浮动的，要么不是浮动的，所以实际上没有一个“关键帧”的值，基于将某个值设置为浮动。您可以做的（烟雾和镜像方法）是设置浮动，获取浮动元素的最终位置值，然后取消设置浮动并将这些值用作动画的参数？我很好奇你想到了什么：）祝你好运！是的，这听起来和我在最初的帖子中设想的方法很相似-但是，我担心它不会很通用。。。我已经试过了，但效果不太好：-而且，代码太糟糕了，不值得这么做。