Я использую плагин 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
Вы добавили это в css?
#Grid .mix{
opacity: 0;
display: none;
}