Activate MixItUp Jquery Plugin After Event Has finished?

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>

When my page loads, it load an class called descBars and the mixItUp Elements, but with visibility hidden. I've been trying to figure out how to have mixItUp fire after a "filter" is clicked, but only after the descBar fades out so the portfolio elements load at the top of the page instead of the bottom and then move to to top like they do now.

Answer 1

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

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

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


            });
        });
    });