问题
Jquery isotope filtering fade unmatched items instead of hiding. in case of filtering the unmatched items get the property of display none. I want to show the match items should automatically scroll up and other should scroll down something like this http://base22.com/wps/portal/home/about-us/our-team
var $container = $('.portfolioContainer');
$container.isotope({
filter: '*',
hiddenStyle: {opacity: 0.7},
visibleStyle: {opacity: 1},
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.innermenu .list-inline li a').click(function() {
$('.innermenu .list-inline li .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('post-category');
$container.isotope({
filter: selector,
hiddenStyle: {opacity: 0.7},
visibleStyle: {opacity: 1},
itemPositionDataEnabled: true,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
.isotope:after {
content: '';
display: block;
clear: both;
}<?php
get_header();
?>
<?php // echo get_the_ID(); ?>
<div class="row submenu">
<div class="col-md-12 col-sm-12 col-xs-12 submenu-padding">
<nav class="innermenu">
<ul class="list-inline">
<li><p class="tags-menu submenu-padding">tags</p> </li>
<li><a href="#" post-category="*" class="current">All</a></li>
<li><a href="#" post-category=".mobile">Mobile</a></li>
<li><a href="#" post-category=".websites">websites</a></li>
<li><a href="#" post-category=".social-media">Social Media</a></li>
<li><a href="#" post-category=".digital-activation">Digital Activation</a></li>
<li><a href="#" post-category=".films">Films</a></li>
<li><a href="#" post-category=".search">Search</a></li>
<li><a href="#" post-category=".media">Media</a></li>
</ul>
</nav>
</div>
</div>
<?php
if (have_posts()) :
?>
<div class="portfolioContainer">
<?php while (have_posts()): the_post() ?>
<div class="col-md-4 col-sm-4 col-xs-12 portfolio thumbnail-margin <?php
$categories = get_the_category();
$separator = ' ';
$output = '';
if ($categories) {
foreach ($categories as $category) {
$output .= $category->slug . $separator;
} echo trim($output, $separator);
}
?>">
<div class="thumbnail">
<a href="<?php echo get_permalink(); ?>">
<?php
if (has_post_thumbnail()) {
the_post_thumbnail();
}
?>
<div class="caption">
<h4 class="portfolio-heading"><?php echo the_title(); ?></h4>
<div class="portfolio-caption"> <?php the_excerpt(); ?></div>
</div>
</a>
</div>
</div>
<?php endwhile; ?>
</div>
<?php
endif;
?>
<?php
get_footer();回答1:
Maybe you can do something with Dave Desandro's isotope hide-reveal plugin which does not display:none the unmatched items, only fades to a certain opacity value. Then you can animate the visible and faded items as you want.
$( 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 );
});
};
回答2:
I would first ask the question do you need isotope. It's not really built for filters like that. if you need it for layout and can't get the same effect with flexbox or floats then instead of trying to extend isotope filtering just make your own filtering script to add / remove an active class from your items. css can handle the rest. for the filtering i'd say something like this:
<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>
This would all still work on an isotope set of items just change up the selectors in the jQuery and CSS.
Be aware that if your .active styles change the width or height or other spacing properties you'll have to call $('.isotope').isotope('layout'); again at the end of the filter click function.
来源：https://stackoverflow.com/questions/25916873/jquery-isotope-filtering-fade-unmatched-items-instead-of-hiding