在我的同位素网格中,我希望显示匹配和不匹配的元素,而不会有不匹配的元素消失。相反,我希望不匹配的元素的不透明度为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),但同位素链接不再起作用,我对第二个答案没有任何理解。
My 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;
});
答案 0 :(得分: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 );
});
};
答案 1 :(得分:1)
据我所知,如果不改变同位素的工作方式,就不可能顺利完成这项工作(虽然我没有深入研究来源)。
您可以使用$container.isotope()
调用中的选项设置同位素中的“可见”和“隐藏”样式:
hiddenStyle: {
opacity: .7
},
visibleStyle: {
opacity: 1
},
不幸的是,在设置隐藏样式的动画后,同位素在这些div上明确设置了display: none
样式,因此您需要覆盖它。
#main-inner .box {
display:block !important;
它还会删除opacity
样式。您可以通过以下方式解决此问题:
#main-inner .box[style*=none] {
opacity:.7;
}
但这开始有点难看。
此外,同位素还会移动“可见”项目以填充左上角(同样具有明确的样式),因此即使您这样做,也不太可能是您正在寻找的东西。最重要的是,事情会奇怪地移动,因为同位素假定它们在不存在时是隐形的。
答案 2 :(得分:0)
所以,如果有人想要同样的效果而且没有发现任何东西,我有一个不太好的解决方案但显示我想要的......
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);
});