javascript - 隐藏投资组合 Div 后重新初始化 MixItUp

Question

<div class="col-sm-3">
    <div class="sidebar-nav">
        <div class="navbar navbar-default avbar-fixed-top" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <span class="visible-xs navbar-brand">Sidebar menu</span>
            </div>
            <div class="navbar-collapse collapse sidebar-navbar-collapse">
                <ul class="nav navbar-nav">
                    <img id="logo" src="assets/img/logo.jpg"/> 
                    <li class="active home"><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><!--/.nav-collapse -->
        </div>
    </div>
</div>

<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>

<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>

<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
    <!--<source src="polina.webm" type="video/webm">-->
    <source src="assets/videos/video.mp4" type="video/mp4">
</video>

<footer class="navbar navbar-fixed-bottom"> 
    <div class="footer-container container-fluid">
        <div class="social-links">
            <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
            <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
            <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
            <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
        </div>
    </div>  
</footer>

<!-- /.container -->

<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>

<script>
    $(function(){
        category = "";
        homeVisible = true;

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

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

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

                homeVisible = false;
            });
        });

        $( ".home" ).click(function() {
            if (homeVisible == false){

                homeVisible = true;

                $('#portfolio').fadeOut('slow').promise().done(function() {
                    $( "#descBars" ).fadeIn( "slow", function() {
                    });
                });
            }
        });
    });
</script>

我正在一个单页网站上工作，该网站一次只显示某些部分。MixItUp 在单击li带有filter类的 a 时被初始化，并根据类别加载元素。在此之前div，带有 id 的adescBars已淡出。问题是，当用户单击主页时，我可以让 descBars 淡出，但 MixItUp 在那之后停止工作，不知道如何重新初始化它，或者是否有更好的方法来实现我想要做的事情。