Javascript Jquery将淡出不匹配的项，而不是隐藏

Jquery将淡出不匹配的项，而不是隐藏。 在筛选不匹配项的情况下，获取display none属性。 我想显示匹配项应自动向上滚动，其他项应向下滚动 像这样的

var$container=$（'.portfolioContainer'）；
$container.com({
筛选器：'*'，
hiddenStyle:{opacity:0.7}，
visibleStyle:{opacity:1}，
动画选项：{
持续时间：750，
“线性”，
队列：false
}
});
$（'.innermenu.list inline li a'）。单击（函数（）{
$（'.innermenu.list inline li.current'）.removeClass（'current'）；
$（this.addClass（'current'）；
var选择器=$（this.attr（'post-category'）；
$container.com({
过滤器：选择器，
hiddenStyle:{opacity:0.7}，
visibleStyle:{opacity:1}，
itemPositionDataEnabled:true，
动画选项：{
持续时间：750，
“线性”，
队列：false
}
});
返回false；
});
。同位素项目{
z指数：2；
}
.同位素-隐藏。同位素-项目{
指针事件：无；
z指数：1；
}
.同位素，
.同位素.同位素项目{
/*将持续时间值更改为您喜欢的值*/
-webkit转换持续时间：0.8s；
-moz转换持续时间：0.8s；
-ms转换持续时间：0.8s；
-o-过渡持续时间：0.8s；
过渡时间：0.8s；
}
.同位素{
-webkit转换属性：高度、宽度；
-moz过渡特性：高度、宽度；
-ms过渡特性：高度、宽度；
-o-过渡特性：高度、宽度；
过渡特性：高度、宽度；
}
.同位素.同位素项目{
-webkit转换属性：-webkit转换，不透明度；
-moz变换属性：-moz变换，不透明度；
-ms转换属性：-ms转换，不透明度；
-o-过渡性质：-o-变换，不透明度；
过渡属性：变换、不透明度；
}
/****禁用同位素CSS3跃迁****/
.同位素，无过渡，
.同位素。无过渡。同位素项目，
.同位素.同位素项目.无过渡{
-webkit转换持续时间：0s；
-moz转换持续时间：0s；
-ms转换持续时间：0s；
-o-过渡持续时间：0s；
转换持续时间：0s；
}
.同位素：之后{
内容：''；
显示：块；
明确：两者皆有；
}


标签









也许你可以用Dave Desandro的同位素做点什么，它不会显示：没有不匹配的项目，只会褪色到某个不透明度值。然后，可以根据需要设置可见和褪色项目的动画

$( function() {
// init Isotope
    var $container = $('.your-container').isotope({
            layoutMode: 'your-layout',
            itemSelector: '.your-item'
    });

    /* some filter functions for example... 
    var filterFns = {
        show if number is greater than 50
        numberGreaterThan50: function() {
            var number = $(this).find('.number').text();
            return parseInt( number, 10 ) > 50;
        },
        show if name ends with -ium
        ium: function() {
            var name = $(this).find('.name').text();
            return name.match( /ium$/ );
        }
    };*/

    // bind filter button click
    $('#filters').on( 'click', 'button', function() {
        var filterValue = $( this ).attr('data-filter');
        // use filterFn if matches value
        filterValue = filterFns[ filterValue ] || filterValue;
        $container.hideReveal({ filter: filterValue });
    });

    // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        $buttonGroup.on( 'click', 'button', function() {
            $buttonGroup.find('.current').removeClass('current');
            $( this ).addClass('current');
        });
    });

});

// here you can add animations for your visible and hidden items
$.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 );
    });
};

我首先要问一个问题，你需要同位素吗。它不是专门为这样的过滤器设计的。如果您需要它来进行布局，并且无法使用flexbox或floats获得相同的效果，那么与其尝试扩展同位素过滤，不如创建自己的过滤脚本，从项目中添加/删除一个
活动的
类。css可以处理其余部分。对于过滤，我会这样说：

<script>
jQuery(document).ready(function($) {
    // do this for each item on your page that needs filters
    $('.filtered-section').each(function(index, el) {
        // helper var
        $this = $(this);
        // more helpers
        $filters = $this.find('.item-filters .filter');
        $itemHolder = $this.find('.items');
        $items = $this.find('.items .item');
        // filter click event
        $filters.click(function(event) {
            // if you only want one active filter do this: 
            // otherwise remove the next line 
            $filters.removeClass('active');
            // make the clicked filer active.
            $(this).toggleClass('active'); // toggle, not add, in case you remove the line above.
            // create array for selectors
            selectorArray = [];
            // for each active filter toss the css selector from the data attribue into the array
            $filters.filter('.active').each(function(index, el) {
                selectorArray.push($(el).data('filter'));
            });
            // make a string from the array, joining them with commas
            selector = selectorArray.join(', ');
            // if the All selector is chosen then stop filtering all together
            if (selector == "*") {
                $items.removeClass('active');
                $itemHolder.removeClass('filtered');
            } else {
                // otherwise
                // Add an active class to all items matching the filter
                $items.filter(selector).addClass('active');
                // remove the class from all not matching
                $items.not(selector).removeClass('active');
                // make sure the holder is set to filtered so your css triggers
                $itemHolder.addClass('filtered');
            }
        });
    });
});
</script>

<div class="filtered-section">
    <div class="item-filters">
        <ul>
            <li><a href="#view-all" data-filter="*">View All</a></li>
            <li><a href="#filter-1" data-filter=".filter-1">Filter 1</a></li>
            <li><a href="#filter-2" data-filter=".filter-2">Filter 2</a></li>
            <li><a href="#filter-3" data-filter=".filter-3">Filter 3</a></li>
            <li><a href="#filter-4" data-filter=".filter-4">Filter 4</a></li>
            <li><a href="#filter-5" data-filter=".filter-5">Filter 5</a></li>
        </ul>
    </div><!-- /.item-filters -->
    <div class="items">
        <div class="item filter-1">Filtered 1</div><!-- /.item filter-1 -->
        <div class="item filter-2">Filtered 2</div><!-- /.item filter-2 -->
        <div class="item filter-3">Filtered 3</div><!-- /.item filter-3 -->
        <div class="item filter-4">Filtered 4</div><!-- /.item filter-4 -->
        <div class="item filter-5">Filtered 5</div><!-- /.item filter-5 -->
    </div><!-- /.items -->
</div><!-- /.filtered-section -->


<style>
.items .item {
  transition: all 600ms linear;
  opacity: 1;
}

.items.filtered .item {
  opacity: 0.5;
}

.items.filtered .item.active {
  opacity: 1;
}
</style>


jQuery（文档）.ready（函数（$）{
//对页面上需要筛选的每个项目执行此操作
$（'.filtered section'）。每个（函数（索引，el）{
//辅助变量
$this=$（this）；
//更多助手
$filters=$this.find（'.item filters.filter'）；
$itemHolder=$this.find（'.items'）；
$items=$this.find（'.items.item'）；
//筛选单击事件
$filters.单击（函数（事件）{
//如果只需要一个活动过滤器，请执行以下操作：
//否则，请删除下一行
$filters.removeClass（'active'）；
//使单击的文件管理器处于活动状态。
$（this）.toggleClass（'active'）；//切换，而不是添加，以防删除上面的行。
//为选择器创建数组
selectorArray=[]；
//对于每个活动筛选器，将数据属性中的css选择器放入数组中
$filters.filter（'.active'）。每个（函数（索引，el）{
选择array.push（$（el.data（'filter'））；
});
//从数组中创建一个字符串，并用逗号连接它们
selector=selectorArray.join（'，'）；
//如果选择了“全部”选择器，则停止全部过滤
如果（选择器=“*”）{
$items.removeClass（'active'）；
$itemHolder.removeClass（'filtered'）；
}否则{
//否则
//将活动类添加到与筛选器匹配的所有项
$items.filter（选择器）.addClass（'active'）；
//从所有不匹配的类中删除该类
$items.not（选择器）.removeClass（'active'）；
//确保支架设置为filtered，以便css触发
$itemHolder.addClass（'filtered'）；
}
});
});
});








过滤1
过滤2
过滤3
过滤4
过滤5
.项目.项目{
过渡：所有600ms线性；
不透明度：1；
}
.items.filtered.item{
不透明度：0.5；
}
.items.filtered.item.active{
不透明度：1；
}

这一切仍然适用于同位素s