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