Изотоп: как отображать и устанавливать значения непрозрачности для непревзойденных предметов

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), но ссылка Isotope больше не работает, и я ничего не понял из второго ответа.

Мой Изотоп INIT:

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

Дэйв 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); 
}); 
}; 

Answer 2

Насколько я могу видеть, что это не возможно сделать это плавно, не изменяя способ изотопные работы (хотя я не копал в источник).

Вы можете установить «видимые» и «скрытые» стили в изотоп с параметрами в $container.isotope() вызова:

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

К сожалению, после того, как анимировать к скрытому стиля, изотоп явно устанавливает в display: none стиль на тех дивы поэтому вам нужно переопределить это.

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

Он также удаляет стиль opacity. Вы могли исправить это:

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

Но это начинает получить вид некрасиво.

Кроме того, изотоп также перемещает «видимые» элементы, чтобы заполнить верхний левый (опять же с явными стилями), поэтому даже если вы сделаете это, вряд ли это будет то, что вы ищете. И вдобавок ко всему, все будет странно перемещаться, поскольку изотоп предполагает, что они невидимы, когда они не являются.

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

Answer 3

Так что, если кто-то хотел бы тот же эффект, и ничего не нашел, у меня есть решение, которое не так хорошо, но показывает, что я хотел ...

1) Во-первых я desabled дата-фильтр в коде меню фильтра инициализации для остановки фильтрации:

// 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) I добавлена ​​обложка на каждой коробке, которая будет воспроизводить анимацию непрозрачности, и я дал ей прозрачную непрозрачность:

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

4) Я анимированный крышку (с) Выделите JQuery:

$('#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/