Le filtrage isotopique Jquery disparaît des éléments inégalés au lieu de se cacher

Peut-être que vous pouvez faire quelque chose avec le plugin isotopique Hide- revel de Dave Desandro qui ne s'affiche pas: aucun des éléments inégalés, ne se fane que d'une certaine valeur d'opacité. Ensuite, vous pouvez animer les éléments visibles et défrisés comme vous le souhaitez.

 $( function() { // init Isotope var $container = $('.your-container').isotope({ layoutMode: 'your-layout', itemSelector: '.your-item' }); /* some filter functions for example... var filterFns = { show if number is greater than 50 numberGreaterThan50: function() { var number = $(this).find('.number').text(); return parseInt( number, 10 ) > 50; }, show if name ends with -ium ium: function() { var name = $(this).find('.name').text(); return name.match( /ium$/ ); } };*/ // bind filter button click $('#filters').on( 'click', 'button', function() { var filterValue = $( this ).attr('data-filter'); // use filterFn if matches value filterValue = filterFns[ filterValue ] || filterValue; $container.hideReveal({ filter: filterValue }); }); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.current').removeClass('current'); $( this ).addClass('current'); }); }); }); // here you can add animations for your visible and hidden items $.fn.hideReveal = function( options ) { options = $.extend({ filter: '*', hiddenStyle: { opacity: 0.2 }, visibleStyle: { opacity: 1 }, }, options ); this.each( function() { var $items = $(this).children(); var $visible = $items.filter( options.filter ); var $hidden = $items.not( options.filter ); // reveal visible $visible.animate( options.visibleStyle ); // hide hidden $hidden.animate( options.hiddenStyle ); }); }; 

Je voudrais d'abord poser la question, vous avez besoin d'un isotope. Il n'est pas vraiment construit pour des filtres comme celui-ci. Si vous en avez besoin pour la mise en page et ne peut pas avoir le même effet avec Flexbox ou les flotteurs, alors, au lieu d'essayer d'étendre le filtrage isotopique, faites simplement votre propre script de filtrage pour ajouter / supprimer une classe active partir de vos éléments. Css peut gérer le reste. Pour le filtrage, je dirais quelque chose comme ceci:

 <script> jQuery(document).ready(function($) { // do this for each item on your page that needs filters $('.filtered-section').each(function(index, el) { // helper var $this = $(this); // more helpers $filters = $this.find('.item-filters .filter'); $itemHolder = $this.find('.items'); $items = $this.find('.items .item'); // filter click event $filters.click(function(event) { // if you only want one active filter do this: // otherwise remove the next line $filters.removeClass('active'); // make the clicked filer active. $(this).toggleClass('active'); // toggle, not add, in case you remove the line above. // create array for selectors selectorArray = []; // for each active filter toss the css selector from the data attribue into the array $filters.filter('.active').each(function(index, el) { selectorArray.push($(el).data('filter')); }); // make a string from the array, joining them with commas selector = selectorArray.join(', '); // if the All selector is chosen then stop filtering all together if (selector == "*") { $items.removeClass('active'); $itemHolder.removeClass('filtered'); } else { // otherwise // Add an active class to all items matching the filter $items.filter(selector).addClass('active'); // remove the class from all not matching $items.not(selector).removeClass('active'); // make sure the holder is set to filtered so your css triggers $itemHolder.addClass('filtered'); } }); }); }); </script> <div class="filtered-section"> <div class="item-filters"> <ul> <li><a href="#view-all" data-filter="*">View All</a></li> <li><a href="#filter-1" data-filter=".filter-1">Filter 1</a></li> <li><a href="#filter-2" data-filter=".filter-2">Filter 2</a></li> <li><a href="#filter-3" data-filter=".filter-3">Filter 3</a></li> <li><a href="#filter-4" data-filter=".filter-4">Filter 4</a></li> <li><a href="#filter-5" data-filter=".filter-5">Filter 5</a></li> </ul> </div><!-- /.item-filters --> <div class="items"> <div class="item filter-1">Filtered 1</div><!-- /.item filter-1 --> <div class="item filter-2">Filtered 2</div><!-- /.item filter-2 --> <div class="item filter-3">Filtered 3</div><!-- /.item filter-3 --> <div class="item filter-4">Filtered 4</div><!-- /.item filter-4 --> <div class="item filter-5">Filtered 5</div><!-- /.item filter-5 --> </div><!-- /.items --> </div><!-- /.filtered-section --> <style> .items .item { transition: all 600ms linear; opacity: 1; } .items.filtered .item { opacity: 0.5; } .items.filtered .item.active { opacity: 1; } </style> 

Cela fonctionnerait toujours sur un ensemble d'objets isotopiques, il suffit de changer les sélecteurs dans jQuery et CSS.

Soyez conscient que si vos styles .active changent la largeur ou la hauteur ou d'autres propriétés d'espacement, vous devrez appeler $('.isotope').isotope('layout'); À nouveau à la fin de la fonction de clic du filtre.