0 
<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 元素，但会隐藏可见性。我一直在试图弄清楚如何在单击“过滤器”后触发 mixItUp，但只有在 descBar 淡出之后，投资组合元素才会加载到页面顶部而不是底部，然后像这样移动到顶部他们现在这样做。

4

1 回答 1

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

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

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


            });
        });
    });
于 2016-11-30T21:57:43.397 回答