Jquery响应布局浮动动画

时间:2012-07-11 09:18:57

标签: jquery animation layout css-float position

我正在寻找一些东西,我不知道它叫什么,或者我在哪里可以找到神秘信息。

http://ricklancee.com/jquery-layout

^ 所以我现在得到的是一个带有100%宽度(当前浏览器宽度)的包装器的网站,在此我已经放置了一些固定的(240px)和float:left; 当我让窗户变小时,他们会将自己定位在彼此之下。

当他们漂浮在彼此之下时,我希望他们做什么 - 然后回来 - 对那个位置起作用。

http://masonry.desandro.com/显示了一个示例,当您调整窗口大小时,元素将浮动/动画到新位置。

有谁能告诉我这是怎么做的,这种技术叫做什么或者我在哪里可以找到这样做?

我不使用插件,只是为了教育目的自己编写脚本。

非常感谢,

1 个答案:

答案 0 :(得分:0)

使用浮动浏览器可以处理这类事情。

如果你想自己做,那就会变得复杂。

你需要绝对定位div。 position: absolute; - 并确保父div具有position: relative;然后添加一个监听器来监视resize事件,并在调用resize事件时计算div的新位置。

请参阅:http://api.jquery.com/resize/

实际上,将它们设置为新家的动画很简单 - 只需$(....).animate({top: xx, left: xx})。困难的部分将计算它们应该去的地方。

当然可行。

使用.one()绑定resize事件时,只需调用一次。然后,当您被呼叫时,添加setTimeout()以将实际计算延迟1/2秒。然后计算位置并为其设置动画。

仅在动画完成后,再次绑定事件。您不希望在此之前绑定,或者您将同时运行多个动画。 (确保仅在其中一个动画中绑定,而不是所有动画都绑定,因为您将有多个动画的div。)