动画浮动:可视化位置变化

时间:2010-06-18 09:26:13

标签: jquery animation

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

http://jsbin.com/olefi3/2

目前,在这两种模式之间切换会产生相当刺耳的用户体验,因为项目会突然重新定位(因为正在应用/删除CSS类)。每个项目逐渐移动到新的位置将极大地帮助用户更容易地保持他们的方向。

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

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

在我重新发明轮子之前,这样的事情是否已经存在?

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

对于初学者,您需要在包含jquery库之后立即包含jqueryui库,以便.toggleClass()调用所有动画

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

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

祝你好运