jQuery filter toggler function to show/hide images [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

I'm trying to create a "filter toggler" with jQuery, to use for showing/hiding images on a page that has different categories applied to them (using a rel attribute). The filter is outside the list of images, so I need to address them by comparison (I think?) of values.

I can't seem to find a way of applying the "On" switch for fading out all images that are not of the current category. See code below:

$('#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);
});

The HTML structure is as this -

<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>

Edit: Found a solution, see updated code. Could probably use more tweaking but it will do for now.