jQuery砌体和扩展框动画(jQuery masonry and expanding boxes animation)

jQuery砌体和扩展框动画(jQuery masonry and expanding boxes animation)

我正在创建一个网站，其中包含一个显示方框（大小相同）的页面，其中包含一些内容（视频+文本），这些内容会在click()事件中消耗。 一旦打开或关闭，页面将使用砌体重新组织框。 这个页面很大程度上基于这篇文章 ，其中fudgey提供了这个演示 。

在我的情况下，它几乎可以100％正常工作但是当盒子扩展时我有一个动画错误。 看起来盒子确实会膨胀，缩回一点并且伸展好。 所有这一切都在几秒钟内完成。 该页面正在运行worpdress以加载帖子，并且还使用scrollTo在一个框展开后将窗口滚动到正确的位置，并使用vimeo'api对框中的视频进行外部控制。

我已经设置了一个jsfiddle来复制行为。 我注意到如果我评论这一行： $('#grid').masonry(); 在$('.box').click(function(){的动画中$('.box').click(function(){它确实工作正常，但当然会杀死重组动画。

我很确定解决方案非常接近，但我似乎无法确定它。

这里可以看到该网站的现场演示。

提前致谢。

I'm doing a site with a page that shows boxes (all the same size) with some content (video + text) that expends on a click() event. The page is using masonry to reorganize the boxes once one opens or closes. This page is heavily based on this post, where fudgey provided this demo.

It almost works 100% fine in my case but i have an animation bug when the box expands. It seems that the box does expand, retracts itself a bit and expands for good. All of this in a matter of seconds. The page is running with worpdress to load the posts and also uses scrollTo to scroll the window to the right position after a box's expand and vimeo' api to have an external control of the videos in the boxes.

I've set up a jsfiddle to replicate the behavior. I noticed that if i comment this line: $('#grid').masonry(); in the animate of the $('.box').click(function(){ it does work fine, but kills the reorganisation animate of course.

I'm pretty sure the solution is very close but i can't seem to nail it.

A live demo of the site can be seen here.

Thanks in advance.

最满意答案

找到解决方案，它最终不是一个javacript问题，而是一个css bug！ 来自.wrap div，它不够高，无法显示内容。 我已经更新了jsFiddle 。

Found the solution, it was not a javacript problem in the end but a css bug! Came from the .wrap div that was not tall enough to show the content. I've updated the jsFiddle.