4

私はウェブサイトで作業していて、jQueryアイソトープに固執しています。ここで助けが必要です。jqueryアイソトープを使用して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の組み込みのhide/showを使用しているためです。

$(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のデフォルトのfadeIn / fadeOutを使用すると、表示プロパティ値が変更されるだけで、DOM内の位置は変更されません。

フィルタリングドキュメント： http： //isotope.metafizzy.co/docs/filtering.html

于 2013-02-15T09:40:03.427 に答える