javascript - Mixitup jQuery 插件在选择过滤器后重置

Question

我正在使用一个名为 Mixitup 的 jQuery 插件来过滤投资组合页面。当我选择过滤器时，我遇到了问题，它会移动该类别中的对象，就像要过滤它一样，然后重置，以便所有项目再次显示。有人可以帮助我解决这个问题，以便过滤类别并保持过滤状态吗？谢谢。

Js:

$(function () {

    var filterList = {

        init: function () {

            // MixItUp plugin
            // http://mixitup.io
            $('#portfoliolist').mixitup({
                targetSelector: '.portfolio',
                filterSelector: '.filter',
                effects: ['fade'],
                easing: 'snap',
                // call the hover effect
                onMixEnd: filterList.hoverEffect()
            });             

        },

        hoverEffect: function () {

            // Simple parallax effect
            $('#portfoliolist .portfolio').hover(
                function () {
                    $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
                    $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');             
                },
                function () {
                    $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
                    $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');                               
                }       
            );              

        }

    };

    // Run the show!
    filterList.init();


});

HTML 示例:

<ul class="nav nav-pills" id="filters">
    <li><a data-toggle="pill" data-filter="logo design outdoor onine photo video" class="filter">All</a></li>
    <li><a data-toggle="pill" data-filter="logo" class="filter">Logos</a></li>
    <li><a data-toggle="pill" data-filter="design" class="filter">Design</a></li>
    <li><a data-toggle="pill" data-filter="outdoor" class="filter">Outdoor</a></li>
    <li><a data-toggle="pill" data-filter="online" class="filter">Online</a></li>
    <li><a data-toggle="pill" data-filter="photo" class="filter">Photo</a></li>
    <li><a data-toggle="pill" data-filter="video" class="filter">Video</a></li>
</ul>

<!-- start of sorting container -->
<div class="row buffer" id="portfoliolist">

        <!--portfolio item container -->
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3 buffer portfolio logo" data-cat="logo">
            <div class="work-thumbnail">
                <img class="img-responsive img-center" src="_images/work/thumbnails/logo_BorealBrushworks.jpg" alt="Boreal Brushworks" />
                <div class="work-summary">
                    <h4>Boreal Brushworks Logo</h4>
                </div>
            </div>
        </div>
<!-- Rest of HTML after this... -->

存在问题的实时页面:http://dai2.designangler.com/work

Answer 1

你把这个添加到CSS了吗？

#Grid .mix{
      opacity: 0;
      display: none;
}