title: jQuery FadeOut() doesn't work. Click just jumps instead
body: <p>Can someone shed some light on this snippet.</p>
  
  <p>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. </p>
  
  <p>Here is the code:</p>
  
  <pre><code>    $j('#filter a').click(function(){
                    var colorClass = '.' + $j(this).attr('class');
                      //if($j('.portfolio').hasClass(colorClass){
  
                    if(colorClass=='.box') {
                      // show all hidden 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');
                    }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Here is the HTML for the filtering</p>
  
  <pre><code>   &lt;div id="filter"&gt;
  &lt;ul&gt;
      &lt;?php
      $taxonomy = 'portfolio-box-sets';
      $terms = get_terms($taxonomy, 'hierarchical=0');
          echo '&lt;li&gt;&lt;a class=".fbox"&gt;All&lt;/a&gt;&lt;/li&gt;';
          if ($terms) {
            foreach($terms as $term) {
              echo '&lt;li&gt;&lt;a class="'.$term-&gt;name.'"&gt;' . $term-&gt;name . '&lt;/a&gt;&lt;/li&gt;';
            }
          }
      ?&gt;  
  &lt;/ul&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I've also tried specifying a width to the wrapper element but it didn't help.</p>