Jquery同位素过滤淡化不匹配的项目而不是隐藏 [英] Jquery isotope filtering fade unmatched items instead of hiding

问题描述

Jquery同位素过滤淡化不匹配的项目而不是隐藏。如果过滤不匹配的项目，则
获得display none的属性。
我想显示匹配项应自动向上滚动，其他应该向下滚动
类似这样的
http://base22.com/wps/portal/home/about-us/our-team

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();

顶行的ed元素和所有其他元素应按照。

ed elements on the top row and all other should shift down according.

推荐答案

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

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

这篇关于Jquery同位素过滤淡化不匹配的项目而不是隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！