HTML 和 JQuery 用于动画 n×n 网格的框或图块 [关闭]

Posted 2023-05-08

【中文标题】HTML 和 JQuery 用于动画 n×n 网格的框或图块 [关闭]

【英文标题】：HTML and JQuery for animating a n-by-n grid of boxes or tiles [closed]

【发布时间】：2012-12-09 06:29:07

【问题描述】：

我想使用 html 5、CSS、jQuery（动画）创建一个布局，如下所示：http://imgur.com/upRti。我想为瓷砖的多种排列之间的过渡制作动画。例如，在这样的一组图块或框与像这样http://imgur.com/3ukp8 的一组类似的框或图块之间。 （为了说明的目的，第二张图片只是第一张图片的旋转，但我们可以期待任何组合和组织的框/图块）。

动画应该由按下按钮触发，并且应该可以重复使用，因为可能有无数种方法来组织盒子。我希望过渡像这样工作：每个盒子在独立的路径上向屏幕右侧移动，而新盒子在自己的独立路径上从左侧移动。我希望整个动画被限制在它自己的 div 中，这样它就不会干扰页面上的其他元素（导航栏等）。最后一个限制是我希望它可以在大多数现代浏览器（理想情况下也是 IE 8 和 9）中工作。

标记框（两组）最优雅的方式是什么？什么是好的动画功能？

【参考方案1】：

我先看看Isotope，它有很多基于网格的内容的排序和动画。

查看演示，尤其是关于adding elements 的部分。这似乎是你想要的效果。

您可能需要通过添加空/透明项目来“欺骗”它使其看起来像您建议的布局。