用于过滤的 jQuery 同位素不起作用

Question

我正在做一个网站，现在卡在 jQuery isotope 上，我需要一些帮助，拜托 我正在使用 jquery isotope 过滤 div，但不知何故它不起作用

我的 HTML：

<center><a href="" class="filter" rel="all">show all</a> | <a href="" class="filter" rel="green">green</a> | <a href="" class="filter" rel="blue">blue</a> | <a href="" class="filter" rel="pink">pink</a></center>
<br>
<div class="wrap">
    <div class="box green"></div>
    <div class="box blue"></div>
    <div class="box pink"></div>
    <div class="box blue"></div>
    <div class="box pink"></div>
    <div class="box green"></div>
    <div class="box pink"></div>
    <div class="box green"></div>
    <div class="box blue"></div>

    <div class="clear"></div>
</div>

我的 CSS：

.wrap{
    margin: auto;
    width: 660px;
    background: #ccc;
}
.clear{
    clear: both;
}
.box{
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px 10px;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
.pink{
    background: pink;
}

我的 Javascript：

$(document).ready(function() {
    $('.wrap').isotope({
        itemSelector: '.box'
    });

    $('a.filter').click(function() {
        var to_filter = $(this).attr('rel');
        if(to_filter == 'all') {
            $('.box').fadeIn();
        } else {
            $('.box').each(function() {
                if($(this).hasClass(to_filter)) {
                    $(this).fadeIn();
                } else {
                    $(this).fadeOut();
                }
            });
        }
        return false;
    });
});

或者您可以查看此链接：http://jsfiddle.net/wPdXF/

我的确切问题： 在我单击过滤器链接后，div 不会随机播放/动画

谁能帮帮我？

对不起我的英语不好

Answer 1

您遇到的问题（它“过滤”项目，但不重新定位它们，或动画重新定位）是因为您使用的是 jquery 的内置隐藏/显示而不是同位素的内置过滤机制。

$(document).ready(function() {
$('.wrap').isotope();

$('a.filter').click(function() {
    var to_filter = $(this).attr('rel');
    if(to_filter == 'all') {
        $('.wrap').isotope({filter: '.box'});
    } else {
        $('.wrap').isotope({filter: '.'+to_filter});
    }

});
});

工作小提琴：http://jsfiddle.net/yDPxK/1/

您需要做的是为过滤器提供同位素（您从 rel 属性匹配的类名。使用 jquery 的默认淡入/淡出只会改变它们的显示属性值，而不是改变它们在DOM。

过滤文档：http://isotope.metafizzy.co/docs/filtering.html