jQuery过滤器切换器功能显示/隐藏图像

Question

我正在尝试使用jQuery创建一个“过滤器切换器”，用于在应用了不同类别的页面上显示/隐藏图像（使用rel属性）。过滤器在图像列表之外，所以我需要通过比较（我认为？）值来解决它们。

我似乎无法找到一种方法来应用“开启”开关来淡出所有不属于当前类别的图像。请参阅以下代码：

$('#filter a').toggle(function() {
    // On
    $('.nodes a').removeClass('inactive');
    $('.nodes a').animate({opacity: 1}, 250);
    $('.nodes a').animate({opacity: 1}, 1);
    $('filter a').animate({opacity: 0.5}, 1);
    $(this).animate({opacity: 1}, 1);
    var filter = $(this).attr('rel');
    $('.nodes span').not('.' + filter).parent().addClass('inactive');
    $('.nodes a.inactive').animate({opacity: 0.5}, 250);
    $('#filter a').not(this).animate({opacity: 0.5}, 250);
}, function() {
    // Off (Reset)
    $('.nodes a').removeClass('inactive');
    $('.nodes a').animate({opacity: 1}, 250);
    $('#filter a').animate({opacity: 1}, 250);
});

HTML结构就是这样 -

<ul class="nodes">
 <li>
  <a>
   <span>
    <img>
   </span>
  </a>
 </li>
</ul>
<div id="filter">
 <ul>
  <li>
   <a href="#" rel="category">Category</a>
  </li>
 <ul>
</div>

编辑：找到解决方案，查看更新的代码。可能会使用更多的调整，但它现在会做。