Mixitup jQuery插件在選擇過濾器後重置

我正在使用名爲Mixitup的jQuery插件來過濾投資組合頁面。當我選擇過濾器時，我遇到了問題，它將移動該類別中的對象，就好像它要過濾它，然後重置，以便所有項目都再次顯示。有人可以幫我解決這個問題，以便篩選和保持篩選類別？謝謝。Mixitup jQuery插件在選擇過濾器後重置

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

來源

2014-02-19 Phorden

你加這個的CSS？

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

來源

2014-02-20 14:38:54

我現在有。它不起作用。謝謝回覆。 – Phorden

但你使用混合類嗎？我檢查了你的代碼，我看到.mix_all。通過使用.mix_all {不透明度：0;顯示：無;}我得到它的工作。修改目標html和class/id名稱時，不要使用默認的css propery。這不會奏效！ –

是的，它做到了。我跟着這個教程，肯定錯過了一些東西。感謝您的幫助。 – Phorden

Mixitup jQuery插件在選擇過濾器後重置

回答

相關問題