事件结束后激活MixItUp Jquery插件？

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元素，但隐藏了可见性。我一直试图弄清楚如何在＆＃34;过滤器＆＃34;之后使mixItUp开火。单击，但只有在descBar淡出之后，组合元素才会加载到页面顶部而不是底部，然后像现在一样移动到顶部。

Answer 1

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

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

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


            });
        });
    });