イベント終了後にMixItUp Jquery Pluginを有効にしますか？

Question

<ul class="nav navbar-nav"> 
        <img id="logo" src="assets/img/logo.jpg"/> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">About</a></li> 
        <li class="filter" data-filter=".category-1"><a href="#">Animation</a></li> 
        <li class="filter" data-filter=".category-2"><a href="#">Commercial</a></li> 
        <li class="filter" data-filter=".category-3"><a href="#">Documentary</a></li> 
        <li class="filter" data-filter=".category-4"><a href="#">Film</a></li> 
        <li class="filter" data-filter=".category-5"><a href="#">Music</a></li> 
        <li class="filter" data-filter=".category-6"><a href="#">Video Games</a></li> 
        <li><a href="#">Services</a></li> 

        </ul> 

    <div class="col-sm-5 col-sm-offset-4 text-center"> 
    <ul id="descBars"> 
     <li> 
     Something About Elliot 
     </li> 
     <li> 
     Something About Elliot 
     </li> 
     <li> 
     Something About Elliot 
     </li> 
     <li> 
     Something About Elliot 
     </li> 
    </ul> 
    </div> 


<script> 

<div class="col-sm-8 col-sm-push-1"> 
     <div id="portfolio"> 
     <div class="pContainer"> 
      <div class="col-md-3 col-xs-6 thumb mix category-1"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-3 col-xs-6 thumb mix category-2"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-3 col-xs-6 thumb mix category-3"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-3 col-xs-6 thumb mix category-4"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-3 col-xs-6 thumb mix category-5"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-3 col-xs-6 thumb mix category-6"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-3 col-xs-6 thumb mix category-1"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-3 col-xs-6 thumb mix category-2"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 

     </div> 


    </div> 
    </div> 

$(function(){ 

      $('#portfolio').mixItUp({ 
       load: { 
        filter: 'none' 
       } 
      }); 


      $(".filter").click(function() { 
       $(".descBars").fadeOut("slow"); 
      }); 



     }); 
<script> 

私のページが読み込まれると、descBarsとmixItUp Elementsというクラスが読み込まれますが、可視性は隠されています。私は、 "フィルタ"がクリックされた後にmixItUpを呼び出す方法を理解しようとしていましたが、descBarがフェードアウトした後にのみ、ポートフォリオ要素がページの上部にロードされ、彼らは今行う。

Answer 1

$(function(){ 
     category = ""; 
     $(".filter").click(function() { 
      category = $(".filter").data("filter"); 

      $('#descBars').fadeOut('slow').promise().done(function() { 

       $('#portfolio').mixItUp({ 
       load: { 
        filter: category 
       } 
       }); 


      }); 
     }); 
    });