Jquery Icons fly-In 动画效果 onload答案

【问题标题】：Jquery Icons fly-In animate effect onloadJquery Icons fly-In 动画效果 onload
【发布时间】：2012-03-31 06:31:33
【问题描述】：

我需要在页面加载期间图像图标的飞入效果。

请检查下面的图片，第一张图片是图标在页面加载期间应该在不同的方向，它应该像第二张图片一样动画和排列在 div 位置。

任何想法都会很有帮助..

【问题讨论】：

【解决方案1】：

效果本身并不是真正的问题。您可以将所有应该飞入的元素设置为绝对位置，并将它们的位置设置为屏幕外，然后将它们动画到正确的位置。

真正的问题是让它在不破坏布局的情况下使用不同的屏幕尺寸。

【讨论】：

感谢您的建议 sven。对于单个图标，我可以使其最初移动不同的位置[例如，左上角]，然后在加载期间我将其设置为原始 div 位置。但是，这里有很多图标，我最初需要将它们设置为不同的方向。这是我不知道的地方...:(
您不需要为动画设置方向。您只需要为每个图标设置一个开始位置并将它们动画到结束位置。例如，您可以将每个图标设置在每个 css 的起始位置，并为元素本身提供 data-* 属性和结束坐标。然后将所有元素放入一个数组中，循环并从起点到终点对它们进行动画处理。使用这种方法，您不需要为每个图标编写额外的动画，您只需要一个动画函数来接管 data-* 属性的端点。
谢谢斯文。这些图标不是固定的。有时会有 12 个图标 [3rows X 4cols]，有时会有 16 个图标 [4X4] 或 9 个图标[3X3]...
您也可以通过数学函数自动确定。一旦您开始逐步实现该功能，您就会发现它并不像您现在想象的那么难。
是的，sven，你是对的，我认为，我在正确的轨道上。进展顺利...谢谢...