jQuery同位素過濾不工作

Question

我正在一個網站工作，現在卡在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的不洗牌/動畫

誰能幫助我嗎？

對不起，您正在運行到（在那裏「過濾器」的項目，但不重新定位，或動畫重新定位），我的英語不好

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