3

私の同位体グリッドでは、一致しない要素が消えることなく、一致する要素と一致しない要素の両方を表示したいと考えています。代わりに、一致しない要素の不透明度を 0.7 にしたいと考えています。

Isotopeの Web サイトでは、隠しアイテムの 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 で検査すると、変更が表示されません。

私はそれについて同様の質問を1つだけ見つけました（ここ）が、答えはありませんでした.

同様の問題に関する別の質問を見つけました (ここ) が、Isotope リンクが機能しなくなり、2 番目の回答から何も理解できませんでした。

私の同位体初期化:

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

フィドルhttp://jsfiddle.net/h20f38u1/1/

4

3 に答える 3

3

Dave Desandro はまさにあなたが必要としているプラ​​グインを作成しました:

同位体非表示プラグイン

$.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 );
});
};
于 2015-02-03T02:43:47.767 に答える
1

私が見る限り、同位体の仕組みを変更せずにこれをスムーズに行うことは不可能です (ソースを掘り下げていませんが)。

$container.isotope()呼び出しのオプションを使用して、同位体で「表示」および「非表示」スタイルを設定できます。

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

残念ながら、非表示のスタイルにアニメーション化した後、isotope はdisplay: noneこれらの div にスタイルを明示的に設定するため、それをオーバーライドする必要があります。

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

また、opacityスタイルを削除します。次の方法で修正できます。

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

しかし、これは一種の醜いものになり始めています。

さらに、同位体は「目に見える」アイテムを移動して左上を埋めます (ここでも明示的なスタイルを使用)。その上、同位体は目に見えないのに見えないと仮定するため、物事は奇妙に動き回ります。

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

于 2015-02-02T14:29:24.283 に答える