同位素：如何显示和设置不匹配项目的不透明度值

Question

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

在 Isotope website 上，他们概述了隐藏项目的 CSS class，所以我将以下内容应用于我的 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)，但是同位素 link 不再起作用，我对第二个答案一无所知。

我的同位素初始化：

// 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

据我所知，如果不修改同位素的工作方式，就不可能顺利地做到这一点（尽管我没有深入研究源代码）。

您可以在同位素中使用 $container.isotope() 调用中的选项设置 "visible" 和 "hidden" 样式：

hiddenStyle: {
    opacity: .7
},
visibleStyle: {
    opacity: 1
},

不幸的是，在对隐藏样式进行动画处理后，isotope 在这些 div 上显式设置了 display: none 样式，因此您需要覆盖它。

#main-inner .box {
    display:block !important;

它还删除了 opacity 样式。你可以解决这个问题：

#main-inner .box[style*=none] {
    opacity:.7;
}

但这开始变得有点丑陋了。

此外，isotope 还会移动 "visible" 项目以填充左上角（同样使用明确的样式），因此即使您这样做，也不太可能是您要查找的内容。最重要的是，事物会奇怪地移动，因为同位素假定它们是不可见的，而实际上它们不可见。

http://jsfiddle.net/h20f38u1/2/i

Answer 2

所以，如果有人想要同样的效果但没有找到任何东西，我有一个解决方案，它不是很好但显示了我想要的...

1) 首先，我在过滤器菜单初始化代码中禁用数据过滤器以停止过滤：

// 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;
});

2) 我将类添加到菜单过滤器链接

<div id="filter">
    <a class="cat1" href="#" data-filter=".category1">Category1</a>
    <a class="cat2" href="#" data-filter=".category2">Category2</a>
    <a class="cat3" href="#" data-filter=".category3">Category3</a>
    <a class="cat-all current" href="#" data-filter="*">All</a>
</div>

3) 我在每个盒子上添加了一个盖子，它将播放不透明度动画，我给它一个透明的不透明度：

.highlight {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000000;
    opacity:0;
}

4) 我用 jquery 动画封面 (.highlight) :

$('#filter .cat1').click(function(){
    $('#main-inner div .highlight').not('#main-inner .category1 .hightlight' ).animate({ 'opacity':'1' },800);
    $('.category1 .highlight').animate({'opacity':'0'},800);
});
$('#filter .cat2').click(function(){
    $('#main-inner div .highlight').not('#main-inner .category2 .hightlight' ).animate({ 'opacity':'1' },800);
    $('.category2 .highlight').animate({'opacity':'0'},800);
});
$('#filter .cat3').click(function(){
    $('#main-inner div .highlight').not('#main-inner .category3 .hightlight' ).animate({ 'opacity':'1' },800);
    $('.category3 .highlight').animate({'opacity':'0'},800);
});
$('#filter .cat-all').click(function(){
    $('.highlight').animate({'opacity':'0'},800);
});

Fiddle : http://jsfiddle.net/h20f38u1/5/

Answer 3

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

同位素：如何显示和设置不匹配项目的不透明度值

Isotope: How to display and set opacity values for unmatched items

css

jquery

scaletransform

jquery-isotope