Плагин mixitup jQuery сбрасывается после выбора фильтра

Question

Я использую плагин jQuery под названием Mixitup для фильтрации страницы портфолио. У меня возникают проблемы с этим, когда я выбираю фильтр, он перемещает объекты в этой категории, как если бы он собирался его фильтровать, а затем сбрасывается, чтобы все элементы отображались снова. Может ли кто-нибудь помочь мне в этой проблеме, чтобы категории с фильтром и оставались отфильтрованы? Спасибо.

Js:

$(function() { 

    var filterList = { 

     init: function() { 

      // MixItUp plugin 
      // http://mixitup.io 
      $('#portfoliolist').mixitup({ 
       targetSelector: '.portfolio', 
       filterSelector: '.filter', 
       effects: ['fade'], 
       easing: 'snap', 
       // call the hover effect 
       onMixEnd: filterList.hoverEffect() 
      });    

     }, 

     hoverEffect: function() { 

      // Simple parallax effect 
      $('#portfoliolist .portfolio').hover(
       function() { 
        $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad'); 
        $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');    
       }, 
       function() { 
        $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad'); 
        $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');        
       }  
      );    

     } 

    }; 

    // Run the show! 
    filterList.init(); 


}); 

Образец HTML:

<ul class="nav nav-pills" id="filters"> 
    <li><a data-toggle="pill" data-filter="logo design outdoor onine photo video" class="filter">All</a></li> 
    <li><a data-toggle="pill" data-filter="logo" class="filter">Logos</a></li> 
    <li><a data-toggle="pill" data-filter="design" class="filter">Design</a></li> 
    <li><a data-toggle="pill" data-filter="outdoor" class="filter">Outdoor</a></li> 
    <li><a data-toggle="pill" data-filter="online" class="filter">Online</a></li> 
    <li><a data-toggle="pill" data-filter="photo" class="filter">Photo</a></li> 
    <li><a data-toggle="pill" data-filter="video" class="filter">Video</a></li> 
</ul> 

<!-- start of sorting container --> 
<div class="row buffer" id="portfoliolist"> 

     <!--portfolio item container --> 
     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3 buffer portfolio logo" data-cat="logo"> 
      <div class="work-thumbnail"> 
       <img class="img-responsive img-center" src="_images/work/thumbnails/logo_BorealBrushworks.jpg" alt="Boreal Brushworks" /> 
       <div class="work-summary"> 
        <h4>Boreal Brushworks Logo</h4> 
       </div> 
      </div> 
     </div> 
<!-- Rest of HTML after this... --> 

живая страница с вопросами: http://dai2.designangler.com/work

Answer 1

Вы добавили это в CSS?

#Grid .mix{ 
     opacity: 0; 
     display: none; 
}