CSS使用jQuery Quicksand时冒泡 [英] CSS bubbling while using jQuery Quicksand

问题描述

我使用jQuery Quicksand创建一个可过滤的文章组合：

http://davekiss.com/new/

问题是，当侧边栏段落中的过滤器被点击（视频，网站，运动图形），对于被过滤的文章，CSS被加倍，并且在动画完成之前没有被正确定位。插件添加 top：60px;

继续点击网站

code>看到效果。

我相信这是令人讨厌的CSS，但我不知道如何调整它， 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）; 
} 
  

访问 http://razorjack.net/quicksand ，然后点击过滤器（一切，应用程序和实用程序）以查看预期效果。

解决方案

从官方的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.

这篇关于CSS使用jQuery Quicksand时冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！