Другой переход jsuery Quicksand jumpy

Question

Когда я нажимаю фильтр, li получает левое перекрывающееся положение, прежде чем перейти к фильтру. Я проверил предыдущие вопросы и ответы, но не решил проблему. Ul не использует абсолютную позицию, класс li оставил float.

вот HTML

<div class="filters"> 

     <ul id="filters" class="clearfix"> 
      <li><a title="all" href="#" class="active"> all </a></li> 
      <li><a title="web" href="#"> web </a></li> 
      <li><a title="app" href="#"> app </a></li> 
      <li><a title="logo" href="#"> logo </a></li> 
      <li><a title="card" href="#"> card </a></li> 
      <li><a title="icon" href="#"> icon </a></li> 
     </ul> 

    </div> 

    <div id="portfolio"> 

     <ul id="portfolio_list"> 

      <li class="portfolio" data-id="id-1" data-type="logo"> 
       <div class="portfolio-wrapper">    
        <img src="images/portfolios/logo/5.jpg" alt="" /> 
        <div class="label"> 
         <div class="label-text"> 
          <a class="text-title">Bird Document</a> 
          <span class="text-category">Logo</span> 
         </div> 
         <div class="label-bg"></div> 
        </div> 
       </div> 
      </li>    

      <li class="portfolio" data-id="id-2" data-type="app"> 
       <div class="portfolio-wrapper">   
        <img src="images/portfolios/app/1.jpg" alt="" /> 
        <div class="label"> 
         <div class="label-text"> 
          <a class="text-title">Visual Infography</a> 
          <span class="text-category">APP</span> 
         </div> 
         <div class="label-bg"></div> 
        </div> 
       </div> 
      </li> 
     </ul></div> 

И это JQuery называют

$(document).ready(function() { 

    var $filter = $('#filters a'); 
    var $portfolio = $('#portfolio_list'); 
    var $data = $portfolio.clone(); 

    $filter.click(function(e) { 

     if ($($(this)).attr("title") == 'all') { 
      var $filteredData = $data.find('li'); 
     } else { 
      var $filteredData = $data.find('li[data-type=' + $($(this)).attr("title") + ']'); 
     } 

     $portfolio.quicksand($filteredData, { 
      adjustHeight: 'dynamic', 
      duration: 800, 
      easing: 'easeInOutQuad' 
     }); 

     $('#filters a').removeClass('active'); 
     $(this).addClass('active'); 

    }); 

}); 

забыл опубликовать устанавливаемыми сотовыми

 
#portfolio_list li { overflow:hidden; float: left; } 
#portfolio_list .portfolio { width:19%; margin:2% 1% 0% 1%; border: 1px solid #c8c8a9; background: #fff; padding: 20px; } 
    #portfolio_list .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; } 
    #portfolio_list .portfolio img { max-width:100%; position: relative; } 
    #portfolio_list .portfolio .label { position: absolute; width: 100%; height:50px; bottom:-50px; } 
     #portfolio_list .portfolio .label-bg { background: #fff; width: 100%; height:100%; position: absolute; top:0; left:0; } 
     #portfolio_list .portfolio .label-text { color:#000; position: relative; z-index:500; padding:12px 8px 0; } 
      #portfolio_list .portfolio .text-category { display:block; } 

Любая помощь приветствуется. Благодарю.

Answer 1

Проблема была вызвана тем же идентификатором, который используется для стиля ul и li и в то же время для вызова его с помощью jQuery. Необходимо использовать идентификатор без стилей CSS, чтобы не создавать сбои в зыбучих песках.