我有一个可以垂直和水平显示的项目列表:
目前,这两种模式之间的切换会带来相当不和谐的用户体验,因为项目会突然重新定位(当应用/删除 CSS 类时)。让每个项目逐渐移动到新位置将有很大帮助,使用户更容易保持方向。
我知道 jQuery 的 animate 方法不适用于 float。虽然我可以想象一个解决方案,但它看起来相当复杂:
- 为每个项目创建一个不可见的克隆
- 应用所需的样式(垂直/水平)
- 记录克隆的新位置
- 删除克隆
- 将实际项目动画到记录的位置
- 将所需的样式应用到实际项目
- 从动画中删除内联样式
在我开始重新发明轮子之前,类似的东西已经存在了吗?
最佳答案
您可能会喜欢的插件是 isotope。 Isotope 将使用 CSS3 重新排序内容 block 并回退到 jquery-animate。查看:isotope
关于jquery - 动画 float : visualizing position change,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3068505/