jQuery FadeOut() doesn't work. Click just jumps instead

Can someone shed some light on this snippet.

I'm trying to integrate the jQuery Masonry Plugin with filtering. For some reason the FadeIn portion of the function works on all levels but the fadeOut() does not.

Here is the code:

    $j('#filter a').click(function(){
                  var colorClass = '.' + $j(this).attr('class');
                    //if($j('.portfolio').hasClass(colorClass){

                  if(colorClass=='.box') {
                    // show all hidden开发者_Go百科 boxes
                    $j('.portfolio').children('.invis')
                      .toggleClass('invis').fadeIn('slow');
                  } else {  
                    // hide visible boxes 
                    $j('.portfolio').children().not(colorClass).not('.invis')
                      .toggleClass('invis').fadeOut('slow','linear');
                    // show hidden boxes
                    $j('.portfolio').children(colorClass+'.invis')
                      .toggleClass('invis').fadeIn('slow', 'linear');
                  }
}

I'm still improving at my js and jquery skill set, but any help on how to test output or fix this would be much appreciated.

Here is the HTML for the filtering

   <div id="filter">
<ul>
    <?php
    $taxonomy = 'portfolio-box-sets';
    $terms = get_terms($taxonomy, 'hierarchical=0');
        echo '<li><a class=".fbox">All</a></li>';
        if ($terms) {
          foreach($terms as $term) {
            echo '<li><a class="'.$term->name.'">' . $term->name . '</a></li>';
          }
        }
    ?>  
</ul></div>

I've also tried specifying a width to the wrapper element but it didn't help.

---

I've put together a quick example of a working fadeIn fadeOut toggle loosely based off the code you provided. With the html / javascript you've posted, I'm not 100% sure what end goal is, however, hopefully this will get you in the right direction with your toggle:

jQuery fadeIn / fadeOut demo