Плагин Mixitup jQuery сбрасывается после выбора фильтра

0

Я использую плагин jQuery под названием Mixitup для фильтрации страницы портфолио. У меня возникают проблемы с этим, когда я выбираю фильтр, он перемещает объекты в этой категории, как если бы он собирался его фильтровать, а затем сбрасывается, чтобы все элементы отображались снова. Может ли кто-нибудь помочь мне в этой проблеме, чтобы категории с фильтром и оставались отфильтрованы? Спасибо.

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

Теги:
jquery-plugins

1 ответ

3
Лучший ответ

Вы добавили это в css?

#Grid .mix{
      opacity: 0;
      display: none;
}
  • 0
    У меня есть сейчас. Это не работает. Спасибо за ответ.
  • 0
    но вы используете микс-класс? Я проверил ваш код, и я вижу .mix_all. Используя .mix_all {opacity: 0; display: none;} я получил его на работу. не используйте свойства css по умолчанию, если вы изменили целевой html и имена классов / идентификаторов. Это не сработает!
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню