且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

CSS使用jQuery Quicksand时冒泡

更新时间:2022-10-15 09:15:20

从官方的github页面....


Quicksand使用position:absolute为元素设置动画。这意味着容器不能使用绝对定位,因为它破坏了Quicksand的坐标计算。在我试图禁用位置:绝对在你的section.thumbs,Quicksand开始工作完美无瑕。因为你的布局似乎不需要这种定位(常规浮动将工作),这将解决这个问题。



I'm using jQuery Quicksand to create a filterable portfolio of articles:

http://davekiss.com/new/

The problem is, when the filters in the sidebar paragraph are clicked (video, websites, motion graphics), the CSS is doubled on the articles that are being filtered and aren't properly positioned until the animation is complete. The plugin is adding top: 60px; left: 416px; to the first article in the filtered set, pushing everything over.

Keep clicking website to see the effect.

I believe this is the offending CSS, but I'm not sure how to adjust it so that it plays nice with the plugin:

article.project-container {
    float: left;
    position: relative;
    margin: 5px;
    padding: 10px;
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

Visit http://razorjack.net/quicksand and click the filters (everything, applications, utilities) to see the intended effect.

Any help would be much appreciated!

From the official github page....

Quicksand uses position: absolute to animate the elements. This means that the container can't use absolute positioning because it breaks Quicksand's calculation of coordinates. After I tried to disable position: absolute in your section.thumbs, Quicksand started to work flawlessly. And since your layout doesn't seem to need this kind of positioning (regular floats will do the job), this will fix the issue.