0

I'm having a similar issue as this... CSS bubbling while using jQuery Quicksand. When I hit filter the <li> gets a position absolute and a top: 206 and slides back up to 0 after the transition is complete it looks fine. But the <li> is jerky or jumpy while moving. Is this a CSS issue? I have a float: left on every item like they mention in the attached link to the other "bubbling" question.

Here is my 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;
}

Here is my markup when viewing the source. 

<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>
Community
  • 1
  • 1
bryanlewis
  • 577
  • 3
  • 10
  • 27
  • Is your container using absolute positioning ... ? Could you possibly show us some more code – What have you tried Mar 21 '13 at 16:22
  • My ul.filterable-grid looks like it has style="height: 335px; width: 610px;" which is auto set by the plugin I believe in the markup. but that is all. No positioning no. – bryanlewis Mar 21 '13 at 16:24
  • .filter is for the categories up top to click on to start the animation. It is a wrapper for the categories basically. – bryanlewis Mar 21 '13 at 16:29

1 Answers1

0

After looking at the example given here, I think you can get rid of this line:

ul.filterable-grid{ float: left; }

Add a height and a overflow:hidden attribute to your li styling

What have you tried
  • 11,018
  • 4
  • 31
  • 45