4

我在一个网站上工作,现在卡在 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 不会随机播放/动画

谁能帮帮我?

对不起,我的英语不好

4

1 回答 1

4

您遇到的问题(它“过滤”项目,但不重新定位它们,或动画重新定位)是因为您使用的是 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

于 2013-02-15T09:40:03.427 回答