jQuery Quicksand 在过渡时跳动答案

【问题标题】：jQuery Quicksand jumpy while in transitionjQuery Quicksand 在过渡时跳动
【发布时间】：2013-09-29 11:46:59
【问题描述】：

我遇到了与此类似的问题...CSS bubbling while using jQuery Quicksand。当我点击过滤器时，

得到一个绝对位置和一个 top: 206 并在转换完成后滑回 0 它看起来很好。但是

在移动时会变得生涩或跳动。这是一个CSS问题吗？我在每个项目上都有一个float: left，就像他们在另一个“冒泡”问题的附加链接中提到的那样。

这是我的 CSS。

ul.filter li {  
  float:left; 
  margin-right:20px; 
  margin-bottom: 20px; 
  list-style-type: none; 
  font-size: 17px;
}
ul.filterable-grid{ float: left; }
ul.filterable-grid li { 
  width:295px; 
  float: left; 
  margin-right:10px; 
  list-style-type: none; 
  text-transform: uppercase; 
  padding: 10px 10px 10px 10px; 
  border: 3px solid; 
  display: block;
}

这是我查看源代码时的标记。

<ul class="filterable-grid clearfix">
  <li class="portfolio-item" data-id="id-2" data-type="filter-two ">
    <a rel="prettyPhoto[gallery]" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/1.jpg">
      <img width="500" height="500" src="http://localhost:8888/BVH/wp-content/uploads/2013/03/1.jpg" class="attachment-portfolio wp-post-image" alt="1" />
    </a>                   
    <p><a href="http://localhost:8888/BVH/?portfolio=testing2">Testing2</a></p>
  </li>
  <li class="portfolio-item" data-id="id-3" data-type="filter-one ">
    <a rel="prettyPhoto[gallery]" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/1.jpg">
      <img width="500" height="500" src="http://localhost:8888/BVH/wp-content/uploads/2013/03/1.jpg" class="attachment-portfolio wp-post-image" alt="1" />
    </a>                   
    <p><a href="http://localhost:8888/BVH/?portfolio=testing">Testing</a></p>
  </li>
</ul>

【问题讨论】：

您的容器是否使用绝对定位...？你能不能再给我们看一些代码
我的 ul.filterable-grid 看起来有 style="height: 335px; width: 610px;"这是由我相信标记的插件自动设置的。但仅此而已。没有定位号。
.filter 用于点击顶部的类别以启动动画。它基本上是类别的包装器。

标签： jquery css quicksand

【解决方案1】：

看了here给出的例子，我想你可以去掉这行：

ul.filterable-grid{ float: left; }

将height 和overflow:hidden 属性添加到li 样式

【讨论】：

成功了！谢谢！最后。已经搞砸了3个多小时了！谢谢，谢谢，谢谢！
当然。 StackOverflow 让我又等了 2 分钟才可以这样做。现在应该好了！