jquery - 同位素 : How to display and set opacity values for unmatched items

Question

在我的同位素网格中，我想同时显示匹配和不匹配的元素，而不匹配的元素不会消失。相反，我希望不匹配的元素具有 0.7 的不透明度。

关于 Isotope website他们概述了隐藏元素的 CSS 类，所以我将以下内容应用于我的 CSS，但它不起作用。

#main-inner .isotope-hidden, 
.isotope-hidden, 
.isotope-hidden.box {
opacity:0.7 !important;
-webkit-transform:scale(1) !important;
-moz-transform:scale(1) !important;
-ms-transform:scale(1) !important;
-o-transform:scale(1) !important;
transform:scale(1) !important;
} 

在 Firebug 中检查时我看不到更改:

我只找到一个类似的问题(here)，但没有任何答案。

我发现了另一个关于类似问题的问题 (here)，但是同位素链接不再有效，我对第二个答案一无所知。

我的同位素初始化:

// init Isotope
var $container = $('#main-content').imagesLoaded( function() {
    $container.isotope({
        layoutMode: 'packery',
        packery: {
            columnWidth: '.col-width'
        },
        itemSelector: '.box'
    });
});
// bind filter button click
$('#filter a').click(function(){
    $('#filter .current').removeClass('current');
    $(this).addClass('current');

    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: selector,
    });
    return false;
});

fiddle http://jsfiddle.net/h20f38u1/1/

Answer 1

Dave Desandro 构建了一个完全满足您需要的插件:

isotope hide-reveal plugin

$.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 );
});
};