필터링을위한 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; 
} 

내 자바 스크립트 :

$(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의이

사람이 제발 도움이 될 수 있습니다 애니메이션/셔플하지 않는 이유는 무엇입니까? 당신은 jQuery의 숨기기에 내장 된 사용하고 있기 때문에 당신이로 실행하고있는 (곳 "필터"항목 있지만 위치를 변경하거나 재배치 애니메이션을하지 않습니다) 내 나쁜 영어

Answer 1

문제에 대한 유감

입니다/동위 원소 대신에 필터링 메커니즘이 내장되어 있습니다.

$(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를 사용하여 클래스 이름은/페이드 아웃 그냥 변경됩니다와 동위 원소를 제공하는 그들의 디스플레이 속성 값은 DOM에서의 위치를 ​​변경하지

필터링 문서 :. 당신의 JSFiddle에서 http://isotope.metafizzy.co/docs/filtering.html