jquery - 动画 float : visualizing position change

标签 jquery animation

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

http://jsbin.com/olefi3/2

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

我知道 jQuery 的 animate 方法不适用于 float。虽然我可以想象一个解决方案,但它看起来相当复杂:

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

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

最佳答案

您可能会喜欢的插件是 isotope。 Isotope 将使用 CSS3 重新排序内容 block 并回退到 jquery-animate。查看:isotope

关于jquery - 动画 float : visualizing position change,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3068505/

相关文章:

android - 这样的动画怎么做?

用于 CSS 属性的 Jquery 轻松更改并再次返回原位

javascript - 单击输入字段触发窗口调整大小

javascript - chrome 扩展 - 使用内容脚本减少加载时间的最佳方法

javascript - 在动态大小的 DIV 内部垂直对齐 H2

javascript - 按品牌一一展示产品系列

c# - 将缓动函数应用于代码背后的动画

html - 图片 CSS 过渡问题

View 的 iOS page curl 动态转换

Aptana Studio 3 中 FTP 项目的 jQuery 代码辅助